CODEWITHSUNDEEP
htmlcss
HuekoMundo
HuekoMundo

Reputation: 59

How to align content to top

I have next fiddle. You can see that second block placed is not in top. how to fix it?

html is - 

<div id="test1">
    <div id="ct1">
        <img width="100px" height="100px">
        <div id="cct1">
            123123 12312312 3123123123
        </div>
    </div>
    <div id="ct2">
        <img width="100px" height="100px">
        <div id="cct2">
            123123 12312312
        </div>
    </div>
</div>

styles - 

#test1{
    margin-top:300px;
}
#test1>div{
    display:inline-block;
    width:100px;
    height:200px;
}
#test1>div>div{
    height: 100px;
}

Upvotes: 1

Views: 102

Answers (4)

Onkar Deshpande
Onkar Deshpande

Reputation: 234

Just update following css - 

#test1>div{
  float: left;
  width:100px;
  height:200px;
}

Please see updated - fiddle

Also using vertical-align:top; css see - fiddle

Upvotes: 1

Siddharth Thevaril
Siddharth Thevaril

Reputation: 3798

Just add this - 

#test1>div {
    vertical-align: top;
}

to your existing CSS

Upvotes: 1

G.L.P
G.L.P

Reputation: 7217

Try to use vertical align property: Demo

#test1>div{
    display:inline-block;
    width:100px;
    height:200px;
    vertical-align:top;
}

Upvotes: 4

Alexis B.
Alexis B.

Reputation: 1115

The inline-block actually fits your blocks to the line, aligned in the bottom by default. A float: left; is one of the solutions to fix your issue. @g-l-p's solution with vertical-align is an other good option.

#test1>div{
    float: left;
    width:100px;
    height:200px;
}

http://jsfiddle.net/RedBreast/4jfxjuf5/1/

Upvotes: 2

Related Questions