div collapses when i add floats

[4bidden]

Page: http://www.forbiddenmotorsports.com/foa/
CSS: http://www.forbiddenmotorsports.com/foa/overall.css

The problem occurs at the bottom. Obviously the text is meant to be next to each other (right and left divs in css). However, if I add float:left to both elements to line them up, the container div for them (footer) collapses and I lose the background color. Why is this happening? If I add a height to the div it will keep its shape when I float the elements, but the text is going to be dynamic so I don't want a set height.

Basically, when the elements are floated the div sees no content in it and goes to height=0. How can I fix this?

[mwinter]

However, if I add float:left to both elements to line them up, the container div for them (footer) collapses and I lose the background color. Why is this happening?

Floating elements, just like absolutely-positioning them, removes those elements from the flow. It's almost as if they weren't there, though floating affects the horizontal positioning of nearby in-line content.



Basically, when the elements are floated the div sees no content in it and goes to height=0. How can I fix this?

Place an element after the floated elements, and then use the clear property with a value of left, right, or both (depending on the direction(s) you floated the elements). This will force that element below the floated content, expanding the container in the process.

Mike

[pah1986]

Just a quick side note, but your 'home' link goes to the forbidden motorsports homepage and not your Flavours of Arizona homepage. :)