Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Align floating elements of different height

Align floating elements of different height

Problem

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/

Problem courtesy of: Nyxynyx

Solution

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/

Solution courtesy of: Christian Benincasa

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Align floating elements of different height

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×