Cannot position divs side by side

Question

The webpage has two divs (Box1 and Box2), and Box2 contains two nested divs, Box2-1 and Box2-2.

I expect Box1 and Box2 to align side-by-side, but Box1 moves downwards and aligns with the sub-div at the bottom, Box2-2.

Please teach me why this occurs and how to fix this. Any help would be much appreciated.

#box1{
    width: 200px;
    height: 845px;
    
}
#box1, #box2{
    border: 1px solid black;
    display: inline-block;
    margin: 0px 20px;
}
#box2-1, #box2-2{
    height : 400px;
    width: 200px;
    border : 1px solid black;
    box-sizing: border-box;
    margin: 15px;
    display: block
}

<!DOCTYPE html>
<html>
    <head>
        <title</title>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
            <div id="box1">
                <p>Box1</p>
            </div>
            <div id="box2">
                <div class="box2" id="box2-1">
                    <p>Box2</p>
                </div>
                <div class="box2" id="box2-2">
                    <p>Box3</p>
                </div>
            </div>
    </body>
</html>

score 0 · Answer 1 · answered Mar 18 '21 at 04:55

I think this is what you want;

#main-div {
  display: flex;
  justify-content: space-evenly;
}

#box1 {
  border: 1px solid black;
}


#box2 {
  border: 1px solid black;
}

<!DOCTYPE html>
<html>
    <head>
        <title</title>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
      <div id="main-div">
            <div id="box1">
                <p>Box1</p>
            </div>
            <div id="box2">
                <div class="box2" id="box2-1">
                    <p>Box2</p>
                </div>
                <div class="box2" id="box2-2">
                    <p>Box3</p>
                </div>
            </div>
          </div>
    </body>
</html>

Please comment if you need explanation on this.

score 0 · Accepted Answer · answered Mar 18 '21 at 04:56

add vertical-align:top; on #box1, #box2

#box1, #box2{
    border: 1px solid black;
    display: inline-block;
    margin: 0px 20px;
    vertical-align:top;
}

#box1{
    width: 200px;
    height: 845px;
    
}
#box1, #box2{
    border: 1px solid black;
    display: inline-block;
    margin: 0px 20px;
    vertical-align:top;
}
#box2-1, #box2-2{
    height : 400px;
    width: 200px;
    border : 1px solid black;
    box-sizing: border-box;
    margin: 15px;
    display: block
}

<!DOCTYPE html>
<html>
    <head>
        <title</title>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
            <div id="box1">
                <p>Box1</p>
            </div>
            <div id="box2">
                <div class="box2" id="box2-1">
                    <p>Box2</p>
                </div>
                <div class="box2" id="box2-2">
                    <p>Box3</p>
                </div>
            </div>
    </body>
</html>

Thank you very much! Do you know why, by default, Box1 aligns with Box2-2? — ce lu, Mar 18 '21 at 05:31

score 0 · Answer 3 · answered Mar 18 '21 at 05:04

You can use css flexbox to easily achieve this.

Wrap box1 and box2 in a div with class of wrapper and in your css set the display property to flex;

You can read more about css flexbox here, it is used for arranging boxes in a html page.

.wrapper {
  display: flex;
}

#box1{
    width: 200px;
    height: 845px;
}

#box1, #box2{
    border: 1px solid black;
    display: inline-block;
    margin: 0px 20px;
}

#box2-1, #box2-2{
    height : 400px;
    width: 200px;
    border : 1px solid black;
    box-sizing: border-box;
    margin: 15px;
    display: block;
}

<!DOCTYPE html>
<html>
    <head>
        <title</title>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
            <div class="wrapper">
              <div id="box1">
                  <p>Box1</p>
              </div>
              <div id="box2">
                  <div class="box2" id="box2-1">
                      <p>Box2</p>
                  </div>
                  <div class="box2" id="box2-2">
                      <p>Box3</p>
                  </div>
              </div>
            </div>
    </body>
</html>

score 0 · Answer 4 · answered Mar 18 '21 at 05:14

It's because you have block level elements inside inline elements. You can read about it here.

One way around this would be to use

position: relative;
float: left;

instead of display: inline-block for divs box1 and box2.

Try it out:

#box1 {
  width: 200px;
  height: 845px;
}

#box1, #box2 {
  position: relative;
  float: left;
  border: 1px solid black;
  margin: 0px 20px;
}

#box2-1, #box2-2 {
  height : 400px;
  width: 200px;
  border : 1px solid black;
  box-sizing: border-box;
  margin: 15px;
  display: block;
}

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  
  <body>
    <div id="box1">
      <p>Box1</p>
    </div>
    <div id="box2">
      <div class="box2" id="box2-1">
        <p>Box2</p>
      </div>
      <div class="box2" id="box2-2">
        <p>Box3</p>
      </div>
  </div>
  </body>
</html>

score 0 · Answer 5 · answered Mar 18 '21 at 05:25

While the other answers have done a brilliant job of fixing the properties and values in CSS. I think we can achieve something similar using the table tag of HTML:

<!DOCTYPE html>
<html>
    <head>
        <title</title>
        <!-- <link href="style.css" rel="stylesheet"> -->
    </head>
    <body id="body">
        <table>
            <tr>
                <td rowspan="2">Box1</td>
                <td>Box2</td>
            </tr>
            <tr><td>Box3</td></tr>
        </table>
    </body>
</html>

score 0 · Answer 6 · answered Mar 18 '21 at 05:26

Your current output looks like this :

Note : Your Box-1 is shifted below because your Box2-1 and Box2-2 are marked as display: block. Please refer Image-2 (below) with display: inline-block.

Image-1 :

Image-2

Updated style for box2-1 and box2-2 :

#box2-1, #box2-2{
    height : 400px;
    width: 200px;
    border : 1px solid black;
    box-sizing: border-box;
    margin: 15px;
    display: inline-block;
}

Cannot position divs side by side

6 Answers6