CODEWITHSUNDEEP
csshtmlcss-float
Googlebot
Googlebot

Reputation: 15683

CSS float: how to form the second row based on tallest DIV?

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.

Upvotes: 1

Views: 1722

Answers (2)

biziclop
biziclop

Reputation: 14616

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

Upvotes: 3

Ahsan Rathod
Ahsan Rathod

Reputation: 5505

Use display:inline-block instead of using float:left

See the example

Upvotes: 4

Related Questions