Vertical alignment of float:left div's

Question

I have about 10 div's of equal widths but varying height and I want them to fit together as tight as possible.

When set to float left they do not line up to each other vertically but instead are aligned to the bottom of the "row" above.

I've mocked up a little example below and want to get rid of the white space. Do you have any suggestions. I'm limited to using this format because the content that is delivered externally.

Cheers

<div style="width:500px;">
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div>
<div style="display:block; width:250px; height:180px; background-color:#888; float:left;"></div>
<div style="display:block; width:250px; height:130px; background-color:#354689; float:left;"></div>
<div style="display:block; width:250px; height:90px; background-color:#181; float:left;"></div>
</div>

tjm · Answer 1 · 2010-12-15T12:48:56.327

1

Try floating the first one left, then next one right, the next one left, and the next one right ....

EDIT - In response to comments.

If you know the maximum number of span's that you will ever fetch (and assuming it's not much more than the 10 you stated (as this method could get very messy very fast), and assuming CSS3 is not an option you could try something like this,

<style>
    span, /* all spans get display and width, odd spans get float:left */
    span+span+span, 
    span+span+span+span+span, 
    span+span+span+span+span+span+span {
        display:block;
        width:250px;
        float:left;
    }

    span+span, /* even spans get float:right */
    span+span+span+span, 
    span+span+span+span+span+span, 
    span+span+span+span+span+span+span+span {
        float:right;
    }
</style>

You'd need to keep adding span+span+...'s until you've reached the maximum number of consecutive ones you will ever have. The above only matches eight. So it's not the prettiest method!

edited Dec 15 '10 at 12:48

answered Dec 15 '10 at 01:42

tjm

7,500
2
32
53

Thanks for the answer. Is there a way to alternate this using solely css? Unfortunately I'm unable to change the content, id or class once it's delivered. – Tom Dec 15 '10 at 01:47
When you retrieve it, is it as in your example with the styles applied? and, What id's and classes are on each div? – tjm Dec 15 '10 at 01:50
1

When the data is retrieved it actually arrives as: CONTENT - not exactly a convenient format :( – Tom Dec 15 '10 at 01:52
Ok. When you say you have "about 10" do you know before hand exactly how many there will be? Also, is CSS the only option, any room for javascript? And finally, how portable does the solution need to be, I'm just reading about the CSS3 `:nth-child` pseudo-class and wondering if that can help, but I have no idea how well supported it is. – tjm Dec 15 '10 at 02:32
Thanks tjm. I've had alook and css is the only option - no javascript. THe :nth-child looks like our only option but I'm worried about the compatability. Can't believe something so simple is so hard - I thought i had just missed something basic – Tom Dec 15 '10 at 02:59
You could use :nth-child and a javascript solution like ie7-js to enable support in IE. But this doesn't seem to work well anyway. Take a look at the jsfiddle, the floated left element can't rise above the previous element. http://jsfiddle.net/rPMs6/ – Benbob Dec 15 '10 at 03:12
@Tom Updated my answer with a possible alternative. – tjm Dec 15 '10 at 12:29

score 0 · Answer 2 · answered Dec 15 '10 at 02:17

Your scenario could use more clarification.

If they are always the same height, you can hard code their arrangement. To fix your mockup:

<div style="width:500px;">
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div>
<div style="display:block; width:250px; height:180px; background-color:#888; float:left;"></div>
<div style="display:block; width:250px; height:130px; background-color:#354689; float:left; margin-top: -80px;"></div>
<div style="display:block; width:250px; height:90px; background-color:#181; float:left;"></div>
</div>

But that's pretty obvious and probably doesn't help you because they probably have indeterminably random heights. In that case, since they're always the same width and you always have 10 of them, you can group them in vertical stacks of 3 or 4, and then make each stack flush with one another.

<div style="width:250px; float:left;">
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div>
<div style="display:block; width:250px; height:180px; background-color:#888; float:left;"></div>
<div style="display:block; width:250px; height:130px; background-color:#354689; float:left;"></div>
</div>
<div style="width:250px; float:left;">
<div style="display:block; width:250px; height:90px; background-color:#181; float:left;"></div>
<div style="display:block; width:250px; height:180px; background-color:red; float:left;"></div>
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div>
</div>
<div style="width:250px; float:left;">
<div style="display:block; width:250px; height:80px; background-color:#333; float:left;"></div>
<div style="display:block; width:250px; height:140px; background-color:#888; float:left;"></div>
<div style="display:block; width:250px; height:160px; background-color:#354689; float:left;"></div>
</div>

A multi-column approach would be best. There are javascript fixes for browsers which don't support the required css3. http://www.alistapart.com/articles/css3multicolumn It all depends OP wants the divs to fill from left to right or top to bottom. — Benbob, Dec 15 '10 at 03:15

Vertical alignment of float:left div's

2 Answers2

Linked