Question

I use float to place DIVs side by side, but the problem appears when excess DIVs form the second line (row). The next row is formed based on the height of last DIV (not tallest DIV). Thus an incomplete row is formed.

See the example at http://jsfiddle.net/etrader/6qZnk/

Here I want to place purple and green DIVs in a line. But purple DIV forms an incomplete row, and thus, green DIV goes to another line. I want to form the next line based on the height of tallest DIV (i.e. blue DIV).

NOTE: the box heights are not predefined and set dynamically.

Answer 1

What about using inline-blocks instead of floats?

http://jsfiddle.net/6qZnk/1/

Unfortunately, if your blocks have to touch each other horizontally, inline block is not the best solution