CODEWITHSUNDEEP
htmlcss
Nyxynyx
Nyxynyx

Reputation: 63687

Align floating elements of different height

I have a a few divs .photo_box that contains a div .photo_stats_title which holds some text. When the text starts taking up more than 1 line, the height of its parent div .photo_box changes. This causes the various .photo_box divs to be aligned by their bottom.

Problem: How can we get them to align by the top? Preferably without using jQuery/Javascript

JSfiddle: http://jsfiddle.net/ySbjQ/

enter image description here

Upvotes: 4

Views: 900

Answers (2)

Christian Benincasa
Christian Benincasa

Reputation: 1215

Use display: inline-block; and vertical-align: top to align these.

.photo_box {
    background: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
    display: inline-block;
    position: relative;
    margin-bottom: 15px;  
    border: 1px solid #ddd;
    vertical-align: top;
}

http://jsfiddle.net/ySbjQ/1/

Also, if you need support for some older browsers, check this out for some fixes http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

Upvotes: 5

user1123557
user1123557

Reputation:

add "position:absolute;" to .photo_stats_title in the CSS.

http://jsfiddle.net/ySbjQ/4/

Upvotes: 0

Related Questions