Html Question posted in
Some basic documentation can be found here.

Html – How to make two divs side by side in javascript and center them. The two divs are in a container divs

I have two divs that I want side by side. The two divs are inside a div container.

I tried float left on each divs to make them side by side. I also tried center the divs by centering their container using margin: auto but nothing works. I placed a background color on each divs so you can visually see the two divs

/* body {width: 100%} */

div#menu {
  /* position: absolute;
            left: 500px; */
  margin: auto;
  /* width: 100%; */
}

nav {
  /* text-align: center; */
  /* margin: auto; */
  /* margin-top: 25px; */
  /* width: 100%; */
  position: absolute;
  left: 1400px;
  top: 35px;
}

header {
  margin: -8px;
  position: sticky;
  top: 0;
  height: 75px;
  background-color: antiquewhite;
}

a {
  margin: auto;
  text-decoration: none;
  font-size: 24px;
  color: black;
}

#first,
#second {
  /* position: absolute; */
  /* float: left;  */
  border: 1px solid black;
  height: 267px;
  width: 500px;
  font-family: Arial;
  box-shadow: 5px 5px 5px;
}

#second {
  /* float: left; */
  /* top: 350px;
            left: 475px; */
  background-color: aqua;
}

#first {
  /* float: left; */
  /* top: 350px;
            left: 1010px; */
  background-color: yellow;
}

#container {
  height: 550px;
  width: 900px;
  border: 5px solid blue;
  /* position: fixed; */
  margin: auto;
  /* width: 100%; */
  /* float: left; */
}

#one {
  position: absolute;
  top: 275px;
  left: 475px;
  color: green;
  font-size: 24px;
}

footer {
  position: absolute;
  bottom: 0;
  height: 75px;
  width: 100%;
  background-color: antiquewhite;
}
<header>
  <div id="menu">
    <nav>
      <a href="https://www.example.com">Home|</a>
      <a href="https://www.example.com">Games|</a>
      <a href="https://www.example.com">About|</a>
      <a href="https://www.example.com">Login</a>
    </nav>
  </div>
</header>
<p id="one">Hello</p>


<div id="container">
  <div id="first">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
  <div id="second">"Lorem ipsum odor amet, consectetuer adipiscing elit. Volutpat curabitur sociosqu sed nostra, vivamus velit ad quis viverra. Lacus interdum conubia sit tempus ante justo. Mattis aliquet aenean et condimentum eget! Et accumsan aliquet tempus suscipit
    pellentesque posuere. Vulputate sagittis vitae curae natoque nunc sapien etiam vestibulum. Commodo ex condimentum libero aliquam eleifend dis per euismod. "
  </div>

</div>

<footer>
  <hr>
</footer>
<script src="index.js"></script>
Tags:

3

Answers


  1. 0

    You just need to add one style property display: flex in your #container style:

           #container {
        height: 550px;
        width: 900px;
        border: 5px solid blue;
        margin: auto;
        display: flex;
    }`

    You can read or learn more about flex property here:

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox

    Login or Signup to reply.
  2. 0

    Add a Flex property and justify-content in center.

    Update your Container with this code. This will work.

    #container {
        
       display: flex;
        justify-content: center;
        align-items: center;
        height: 550px;
        width: 900px;
        border: 5px solid blue;
        box-sizing: border-box;
    }
    Login or Signup to reply.
  3. 0

    I suggest using CSS Flexbox, which is more or less flexible than using floats. Use the code below to achieve this

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side by Side Divs</title>
    
</head>

<body>
    <header>
        <div id="menu">
            <nav>
                <a href="https://www.example.com">Home|</a>
                <a href="https://www.example.com">Profile|</a>
                <a href="https://www.example.com">About Use|</a>
                <a href="https://www.example.com">Login</a>
            </nav>
        </div>
    </header>
    <p id="one">Hello</p>


    <div id="container">
        <div id="first">"information about the first div"</div>
        <div id="second">"information required "
        </div>
    </div>

    <footer>
        <hr>
    </footer>
    <script src="index.js"></script>
</body>

</html>




<style>
            /* body {width: 100%} */
    
            div#menu {
                /* position: absolute;
                left: 500px; */
                margin: auto;
                /* width: 100%; */
            }
    
            nav {
                /* text-align: center; */
                /* margin: auto; */
                /* margin-top: 25px; */
                /* width: 100%; */
                position: absolute;
                left: 1400px;
                top: 35px;
            }
    
            header {
                margin: -8px;
                position: sticky;
                top: 0;
                height: 75px;
                background-color: antiquewhite;
            }
    
            a {
                margin: auto;
                text-decoration: none;
                font-size: 24px;
                color: black;
            }
    
            #first,
            #second {
                /* position: absolute; */
                /* float: left;  */
                border: 1px solid black;
                height: 267px;
                width: 500px;
                font-family: Arial;
                box-shadow: 5px 5px 5px;
                margin: 10px;
            }
    
            #second {
                /* float: left; */
                /* top: 350px;
                left: 475px; */
                background-color: aqua;
            }
    
            #first {
                /* float: left; */
                /* top: 350px;
                left: 1010px; */
                background-color: yellow;
            }
    
            #container {
                height: 550px;
                width: 1000px;
                border: 5px solid blue;
                /* position: fixed; */
                margin: auto;
                /* width: 100%; */
                /* float: left; */
                display: flex;
                justify-content: center;
                align-items: center;
            }
    
            #one {
                position: absolute;
                top: 275px;
                left: 475px;
                color: green;
                font-size: 24px;
            }
    
            footer {
                position: absolute;
                bottom: 0;
                height: 75px;
                width: 100%;
                background-color: antiquewhite;
            }
        </style>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search