On 2007-02-28, Diogenes <nospam@nospam.netwrote:
The container DIV only grows in vertical size with the
content it encloses. You have other DIVs inside the
container which also size themselves according to content.
>
But the container DIV does not care how large the contained
DIV's are unless there is some content following the
contained DIVS.
But the contained divs are themselves content. Just to clarify: a div
with auto height will be whatever height it needs to be fit to its
"normal-flow descendents" in. It doesn't matter how deeply nested those
descendents are.
What are "normal-flow descendents"? Anything that's not floated, or
position: absolute or position: fixed. In this case the box that
protruded from the bottom of the container div did so because it was
floated.
There is an exception where an auto height box will grow to fit its
floated descendents, and that's if it's a block formatting context root.
See my earlier post.
The contained DIV's are responsible for
there own sizing.
>
2 possible solutions:
>
1) set the height or min-height attribute of the container
element (note - min-height does not work in IE6)
>
2)add some content after the last contained DIV so the
container has to figure out how large the contained DIVs are.
The key things here are that that final box must be normal-flow and have
clear set on it, to require the container to grow vertically and to make
it clear the float respectively.
But yes this is probably the best solution. Sometimes it is encouraging
to see people fuss about not wanting to pollute their semantic soup with
elements whose sole purpose is to tweak the formatting. In that case
either your first solution is good, or if an auto-height is required,
then the container can be made a BFC root by changing its float,
overflow or display properties.
for example, just before the closing </divtag insert the
following:
>
><br style="clear:both" />
<-- this is a non break space -->
There should be no need for the unless it's needed to kick IE
into doing the right thing.
