CSS [DIV-Tableless] Stack vertically with diferent heights filling the gaps?

Question

Hi all,

I have different DIVS floating to left (float:left) that have different heights. I need to stack this divs like image attached:

http://www.krazy.es/images-stackov/capture-divs.jpg

Thanks in advance.

CoolBurn.

Answer 1

Container 1,2,5, and 6 should be in a div, and container 3 and 4 should be in a div. Float THOSE divs.

Answer 2

It looks like the DIV with "container 5" has a clear:left; or clear:both; set in the CSS.

Edit

Nevermind, you have all your divs floated left. Here's some sample code:

Sample Code on jsfiddle.net

If you play with the width of the window, you'll notice that the divs will attempt to fill up all the available horizontal space. The messiness you are seeing results from the divs having different vertical heights. You would get the desired results if:

1. They all had the same height (i.e. they all had 2 lines of text)
2. You assigned a height value to each div with height:90px; (set it to the largest common denominator)
3. Or you decided to only have 3 columns of divs max, even if the browser window is wide enough to accommodate more. They you can put container 1, 2, & 3 in one div on top, and container 4, 5, & 6 in another div underneath
4. Finally (for completeness), you can put container 1 & 4 in a div, container 2 & 5 in a div, and container 3 & 6 in a div, and then float those divs left. This would also give you 3 columns, but it's too restrictive, and I don't recommend it (you can also set the height on the floated divs for better alignment).

Option #2 is my favorite.