bryan bryan - 6 months ago 9
CSS Question

Inline column's getting pushed down

I have a 40% and a 60% inline column but for some reason when I put content in it one of the containers get's pushed down. Does anyone know why this would be happening?

Here is a fiddle



HTML

<div class="grid">
<div class="long-col">a</div>
<div class="small-col">
<div style="font-size:18px;width:100%;">a</div>
<div style="font-size:18px;width:100%;">b<div>
</div>
</div>


CSS

.grid { font-size:0px;}
.grid .long-col {
display:inline-block;
width:40%;
height:500px;
background-color:green;
}
.grid .small-col {
display:inline-block;
width:60%;
height:500px;
background-color:yellow;
}

Answer

add vertical-align top

.grid .long-col {
    background-color: green;
    display: inline-block;
    height: 500px;
    vertical-align: top;
    width: 40%;
}
.grid .small-col {
    background-color: yellow;
    display: inline-block;
    height: 500px;
    vertical-align: top;
    width: 60%;
}