Is it possible to have floated divs of variable sizes 'wrap'/stick/flow to each other ?

Question

I'm trying to align a list of div blocks by 2 columns that have varying heights by floating them to each other. If every block's size is fix, they will naturally stack with one another neatly, however because this one involves varying heights, for blocks that are taller, the adjacent block will have alot of blank space below, before going on with the next block.

However, I noticed that this only happens to one side, if the blocks are floated left, then the right columns blocks will automatically fill up any blank spaces, and vice versa.

However I am now trying to seek a solution for achieving the fluidity for both sides.

You can see an example of what I mean here:

http://test.fred-lin.com/test.html

everything on the 2nd column is nicely fitted, but on the left side, there are alot of blank spaces for taller sizes.

Can anyone help please??

CSS is like this:

.container { width: 600px; } .item { width: 250px; height: auto; background: darkgray; border: 1px solid black; float: left; margin: 5px 0 0 5px; padding: 5px; }

Answer 1

You have 3 options all which have it's drawbacks.

1. Write a JavaScript solution that will calculate each items starting position and then reposition each one accordingly using relative positioning.

2. Change your markup so that there are two container columns that are opposing floats. You'll have to distribute the items between the two programmatically.

3. Use a table so that each item's height matches the one next to it.

Obviously the last two aren't very semantically sound and the first one could be impractical depending on how large the list of items could become. I believe there is a way to do it in CSS 3 but it lacks browser support at the moment.