Go Back to Dynamic Site Solutions :: CSS

Float Stacking

Resize your browser to see how the numbered divs move depending on how wide the browser window is.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Now see what happens when one of them is taller than the rest. Notice how the boxes bump up against and don't flow to the left of the taller box, number 8.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Possible Solution

One can use inline-blocks to achieve basically the same thing without the above demonstrated problem that is often encountered. The main reason why inline-blocks aren't more commonly used is that workarounds are needed to make them work in IE6-7 and Firefox 1-2.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20