CODEWITHSUNDEEP
htmlcss
bryan
bryan

Reputation: 9389

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;
}

Upvotes: 0

Views: 41

Answers (2)

Vishal
Vishal

Reputation: 21

Just Add float: left; ins your .grid .long-col It is only happened because you use extra div in your .grid .small-col so add float: left; ins your .grid .long-col

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

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%;
}

Upvotes: 1

Related Questions