This is a floating element test

How can we have a bunch of horizontal floating elements and customize the background of the whole section?

• Blah blah blah
• Floating LI
• Floating LI
• Floating LI
• Floating LI
• Floating LI
• Floating LI

Content after the UL here (this p is clear: both). You cannot see the red background of the UL because it doesn't know what height to apply. The effective height is zero with all floating elements.

This is in table Floating LI Floating LI Floating LI Floating LI Floating LI Lots more elements Lots more elements Lots more elements Lots more elements Lots more elements Lots more elements Lots more elements Lots more elements

You can see the red background because the UL & LI tags are wrapped by a table. The table has a red background. Even though all elements are floating, the table can auto size the height and apply a background properly. This is the simple way.

In this pure CSS example, we wrap the UL in two DIV elements. The inner DIV sets margin-bottom to -2000px and padding-bottom to 2000px; The Outer DIV sets overflow:hidden; Then, we may apply a background color to either the inner or outer DIV. It is more complicated than the table method, but pure CSS and DIV. This method doesn't seem to work at all in IE, but shows up much like the table wrap method in example 2.

• Blah blah blah
• Floating LI
• Floating LI
• Floating LI
• Floating LI
• Floating LI
• More Stuff 123
• More Stuff 123
• More Stuff 123
• More Stuff 123
• More Stuff 123
• More Stuff 123
• More Stuff 123

Using the display:inline style instead of floating the elements may be an alternate solution, but different. To size the background color we must apply a line-height to the LI elements.