When working on some recent projects I ran across a problem with nested divs. Basically the Main content Div did not stretch when the nested divs stretched, causing the nested divs to flow out of the main div.
After many minutes of playing around with the multitude of "hacks" and "fixes", I determined that by simply adding a paragraph tag to the bottom with a non-breaking space, the container, all of the sudden knew how to adjust the size.
<p> </p>
I further "googled" my way around the net searching for a better alternative and the proper reasoning behind what was happening and stumbled upon a great discussion over at thescripts.com. I had never visited the site previously, but the help that was floating around was greatly appreciated.
"Ben C" and "Diogenes" together answered the how and why and offered multiple soultions:
According to "Ben C":
"It looks like the div inside it is a float. Floats do overflow their
containers, unless their containers are block formatting context roots.
See
http://groups.google.co.uk/group/co...6622d5c5?hl=en&
Solutions: make the container a BFC root (float it left for example, but
watch out for sideffects). Or put something after the float, inside the
container, with clear: right set on it. "
Well that helps to make better sense of the situation, and a smart solution, then I saw "Diogenes" answer:
"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. 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.
for example, just before the closing </divtag insert the
following:
«br style="clear:both" />
<-- this is a non break space -->
One last tip - to see the container DIV, add a temp border
attribute like this ...
<div id="container" style="border:thin dotted blue">
and you will see where the DIV is.
You will discover that a DIV that contains nothing but other
DIV will appear like a one dimensional container; width but
no height. Add some text after the last contained DIV to
'force' it to calculate its new height.
Cheers
Jim "
Well obviusly, my little trick of using a paragraph tag with a non-breaking space was a least a good solution to the problem, even though he suggested using a <br> tag. So if anyone has a better suggestion on the best solution to this problem, let me know.
Recent Comments