Floats Problem

I am sure there is a simple fix for this, but I am rather new to CSS. The page in question is here :


I have a main content div that contains one div for the text content, and one for a swf, which is floated to the right. I am able to make the layout work for setting a fixed-height to the content div, but I wish to avoid using fixed heights because it looks bad on an iphone, which scales the font, making the text run out of the div with the white background. How would I make the text div extend to the bottom of the swf, and have the footer underneath the container div ?

With the current design, it looks fine on the iPhone, but the text div is shorter than the swf, making the layout not work the way I want it.

Any help would be most appreciated.


That link you gave isn’t working :(.

It sounds like the main content div needs a clearing mechanism on it, though I’m not sure just from your description.

Try giving the main content div “overflow:hidden;”

That did the trick! Thanks Ryan!

You’re welcome :).