Side by side divs not aligning

Question

I've created two divs that are sitting side by side by this recommended method I've found here which is the display: inline-block. But I'm having problem with the other div being lower than the first one. Even if they are the same size, the second one still is positioned lower than the first one. Here is the CSS code:

#left {
 text-align: center;
 display: inline-block;
 width: 40%;
}
#right{
 text-align: center;
 display: inline-block;
 width: 40%;
 border-left: 2px double #cccccc;
}
.container2 {
 height: auto;
 box-sizing: border-box;
}

HTML:

<div class="container2">
    <div id="left">
        <p><h4>Adress</h4></p>
        238 Smoky Hollow St.<br>
        Billerica, MA 01821<br>
        817-439-3708<br>
        MarioEisenhower@jourrapide.com
    </div>

    <div id="right">                            
        <h4><p>Working hours</p></h4>
        Monday - Friday  08:00 – 20:00<br>
        Saturday    08:00 – 14:00<br>                           
    </div>
</div>

And the jsfiddle showing the problem: https://jsfiddle.net/dr0es1kg/1/

Could it be because of the tags or something else that is missing?

Answer 1

Add vertical-align: top to #left and #right .

 #left { text-align: center; display: inline-block; vertical-align: top; width: 40%; } #right { text-align: center; display: inline-block; vertical-align: top; width: 40%; border-left: 2px double #cccccc; } .container2 { height: auto; box-sizing: border-box; } 

 <div class="container2"> <div id="left"> <h4>Adress</h4> 238 Smoky Hollow St.<br> Billerica, MA 01821<br> Tel: 817-439-3708<br> MarioEisenhower@jourrapide.com </div> <div id="right"> <h4> Working hours </h4> Monday - Friday 08:00 – 20:00<br> Saturday 08:00 – 14:00<br> </div> </div> 

or use flex

 #left { text-align: center; width: 40%; } #right { text-align: center; width: 40%; border-left: 2px double #cccccc; } .container2 { height: auto; box-sizing: border-box; display: flex; } 

 <div class="container2"> <div id="left"> <h4>Adress</h4> 238 Smoky Hollow St.<br> Billerica, MA 01821<br> Tel: 817-439-3708<br> MarioEisenhower@jourrapide.com </div> <div id="right"> <h4>Working hours</h4> Monday - Friday 08:00 – 20:00<br> Saturday 08:00 – 14:00<br> </div> </div> 

Answer 2

If you drag it smaller you can see it will also affect the left div. I'd add vertical-align: top; to both divs.

Answer 3

You can use Flexbox specification. I rewrited above snippet with flexbox to show you how you can use it. Basically you have to add on parent container display: flex; and set a direction with flex-direction: row;(for your case).

 #left { text-align: center; width: 40%; } #right { text-align: center; width: 40%; border-left: 2px double #cccccc; } .container2 { display: flex; flex-direction: row; height: auto; box-sizing: border-box; } 

 <div class="container2"> <div id="left"> <h4>Adress</h4> 238 Smoky Hollow St.<br> Billerica, MA 01821<br> Tel: 817-439-3708<br> MarioEisenhower@jourrapide.com </div> <div id="right"> <h4> Working hours </h4> Monday - Friday 08:00 – 20:00<br> Saturday 08:00 – 14:00<br> </div> </div> 

Answer 4

In a real sense they are actually not the same size

#right has a border-left:2px which adds to the 40% this is most likely the cause. ALSO TRY FLOATING THE IDS .

Answer 5

The reason why they aren't aligning vertically is first of all because they have different amounts of content ( #left has more than #right ). Secondly, since you have set them to display as inline-block , they are positioned as an inline object would be. Adding vertical-align: top to them should remedy this issue.

An easier way to automatically stretch sibling elements to an appropriate height is to use flexbox with its property align-items: stretch .