How do I clear my floats?

Answer 1

add overflow:auto for .content to clear the floats

example: http://jsbin.com/onedi3

More information for clearing you can find at http://www.quirksmode.org/css/clearing.html

Answer 2

Adding overflow: hidden; to your .content {} will sort this out. It's a float clearing thing. Adding overflow or a clearing element will make the wrapper contain what's inside.

Answer 3

Floating elements are "removed" from their parent, layout-wise. So your content div is empty and gets a height of 0. See this css-discuss article for the causes and fixes.

Answer 4

With XHTML the div has to have content or it will not be registered as "there." To force it to display using XHTML, type   in the div you wish to display.