CSS Help!

January 25, 2006 11:54 AM

CSS help: If I have an element that contains two other elements that add up to less width than the container element, should the container element's background color not be visible between those elements?

I have an element called #container that is 400px wide. Inside that I have two elements, one 100px wide and one 200px wide. The first is floated left, the second floated right. In between these boxes is 100 px. For me, on all browsers, that space is appearing transparent, rather than the specified background color for #container. Why?

posted by Al_Truist to computers & internet (7 comments total)

Most likely because the floated containers do not cause the height of the parent container to expand to fit the floated children.

This is typically overcome by making sure there is a clearing element (a DIV or a BR with clear: both applied to it) as the final element in the parent container.
posted by o2b at 12:16 PM on January 25, 2006

If the elements have a static height, you can do without the clearing element.
posted by o2b at 12:17 PM on January 25, 2006

o2b has it right. < div clear: both;>< /div> as the final contained element would make everything come together the way you want it.
posted by dflemingdotorg at 12:48 PM on January 25, 2006

Sorry, part of the code was parsed. This should explain how it's done.
posted by dflemingdotorg at 12:49 PM on January 25, 2006

thanks all! you folks rock this tiny globe!
posted by Al_Truist at 1:13 PM on January 25, 2006

Yes. Floating an element removes it from the regular page flow. If a container has only floated elements in it, it will have a height of zero.

Adding a clearing element, as o2b suggests, places an element in the regular flow but forces it to make way for the floated elements, thus expanding the dimensions of the container element.
posted by DrJohnEvans at 1:15 PM on January 25, 2006

To share a little more, here is a class I put in all my CSS files:

.clear {clear: both; height: 0px; overflow: hidden;}

It can be applied to both BRs and DIVs (sometimes BRs don't work). The height and overflow are there to make sure the DIV takes up as little vertical space as possible (often it will take up the height of the default line-height, even if empty).
posted by o2b at 1:31 PM on January 25, 2006