On 2007-04-13, Miked <mi*************@gmail.comwrote:
Hello:
I'm relatively new to CSS, and I'm doing a site where I don't want to
use any tables.
I've gotten pretty far, and the site has the layout I want. My only
problem is that I'm using the flot positional paremter a lot on
containers, and it really seems to do what I want. Except when I put
other containers in these containers, they don't expand vertically
like I want.
That is the correct behaviour.
[...]
What I don't understand is why a container as a float won't
automatically expand.
If you were using floats to embed figures in paragraphs of text, rather
than to make general purpose column-like containers, you wouldn't want
the paragraph the float started in to extend past the bottom of the
float leaving a gap before the start of the next paragraph. That's why
floats behave the way they do.
is there another option I should be looking into?
The easiest fix in this case is to add "overflow: hidden" to #container.
That makes #container a "block formatting context root", and computed
values of auto heights for block formatting context roots _do_ include
floating descendents after all.
The other approach is to put something in #container with clear:both set
on it. It will be positioned vertically after the floats (to "clear"
them) and therefore establish #container's height. <div
style="clear:both"></divshould work (although IIRC that div might need
to contain to kick IE into action).
By the way, you have two elements with the same id which is bad, use
class instead, and always use the strict DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
