CSS中的浮动div问题

Question

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

您应该在#contentright之后直接添加<div style="clear:both;"></div>

Answer 2

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 3

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 4

You could append a <div class="clear"/> whose style could like like:

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