Petran Petran - 3 months ago 10
CSS Question

Using display inline-block columns move down

I am trying to use

display:inline-block
to build 3 columns.

It works fine in the beginning, but when I add content to the first column it affects the rest of the layout and renders the rest of the columns at a lower level.

What can I do to avoid this?



.cont {
width: 500px;
height: 200px;
background: #666666;
}
.col {
display: inline-block;
width: 30%;
background: pink;
}

<div class="cont">
<div class="col">
test<br><br><br>
</div>
<div class="col">
col2
</div>
<div class="col">
col3
</div>
</div>




Answer

You should add vertical-align: top; CSS declaration to align the columns vertically at the top:

.cont span {
    display: inline-block;
    vertical-align: top;     /* Vertically align the inline-block elements */
    height:100%;
    line-height: 100%;
    width: 33.33%;           /* Just for Demo */
    outline: 1px dashed red; /* Just for Demo */
}

Here is a online demo.


Honestly, I'm not a fan of using inline-block to create columns on the page, because of the white spaces between them.

The best approach I could suggest is using CSS float property.