Question

I have some very simple code which works perfect for what look I’m trying to achieve. I have two divs which are displayed as “boxes” which are contained within an outer div which is the boxContainer. I have the boxes sitting next to each other rather than one on top of the other, and they are aligned perfectly in the middle of the screen. The boxes widths shrink/grow as the browser width gets smaller/larger, and the boxes relocate to be one on top of the other if the browser window gets too small, while remaining centered on the page. Perfect.

The only problem is that the boxes are aligned on the bottom instead of the top. Because the second box has less text within it, it is pushed further down the page to align with the bottom of the first box. I want them to align on the top instead.

I believe this is caused by display:inline-block, but I’m not sure why, and I don’t know how to fix it and keep the same features I listed above.

If you could help me out, I’d surely appreciate it!!

#boxContainer {
    width:80%;
    margin:0 auto;
    text-align:center;
}
.box {
    display:inline-block;
    width:35%;
    margin:20px;
    border:solid 5px;
    border-radius:40px;
}

<div id="boxContainer">
    <div class="box">
        <h3>BOX 1</h3>
        <p>TEXT GOES HERE, blaha dlfjas fakfasldfjas fkdf lasfjwio we dklajdakfliwo wklw jdkas fdsaj fjdsfwoif ajkdl kdalfej woja dklf woef adkiweoj daljidw odal fjwe ewew kalwoie ea falk blaha dlfjas fakfasldfjas fkdf lasfjwio we dklajdakfliwo wklw jdkas fdsaj fjdsfwoif ajkdl kdalfej woja dklf woef adkiweoj daljidw odal fjwe ewew kalwoie ea falk</p>
    </div>

    <div class="box">
        <h3>BOX 2</h3>
        <p>TEXT GOES HERE, blaha dlfjas fakfasldfjas fkdf lasfjwio we dklajdakfliwo wklw jdkas fdsaj fjdsfwoif ajkdl kdalfej woja dklf woef adkiweoj daljidw odal fjwe ewew kalwoie ea falk</p>
    </div>
</div>

Picture

Thank you!

Answer 1

Since the boxes are already inline-block you can add vertical-align: top to the .box style.