Vertical alignment of float:left div's
I'm having a situation where 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>
Vertical alignment of float:left div's
===

I'm having a situation where 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>