problem with floating divs in CSS

Question

Hello,

I am trying to put 2 columns into a website, I've got that to work fine but for whatever reason, the rest of the page doesn't change size to suit the content in the left column. Here is how it looks: www.kelownafoodspecials.com/indexsides.php.

Pretty stuck so any advice would be greatly appreciated. Thanks,

K

Answer 1

you must float your #content div also. For any elements decalres as float:left(or right), if their containing elements are not also floated elements, the containing elements will not expand to fit the content and it will overlay it's containing element as you are seeing there.

Answer 2

Try this (assuming none of your content is meant to overflow)

#content {
    overflow: hidden;
}

I just tried it using Firebug, and nothing appears to be chopped off (and the #content will expand to contain it's floated child).

Answer 3

You should add <div style="clear:both;"></div> directly after your #contentright

Answer 4

You could append a whose style could like like:

.clear { clear:both; display:block; float:none; }