My friend Norm bought a sword.  It's his THIRD.  What do you do with three swords?

Des Informations, des Idées, et des Opinions Suspectes - rarement mises à jour et de qualité douteuse.

That explains a lot...

How to ensure nested DIVs stay within the parent DIV

What a pain. For a long time, I've been having a sporadic issue with nested divs that don't nest in Firefox. Said another way, the content in a nested div doesn't push out the containing div. Consider this example:

<div ID="container" style="border: 1px solid black">

<div ID="nest1" style="float:left;border: 1px solid blue">content</div><!--end nest1-->

<div ID="nest2" style="float:left;border: 1px solid blue">content</div><!--end nest2-->

</div> <!--end container-->

In this case, the words "content" should be side by side (because they be floated) with a container div surrounding the words. The container div will have a border around it. As I type in more content into the content divs, the container div with the border is supposed to expand. This elementary concept works fine in Internet Explorer but doesn't work in Firefox. In Firefox, I get my tiny bordered box above my content, as if the content is slipping outside of the containing div. Like so:

content
content


As I've said, this has been an issue for me for some time. Invariably I would encounter it and then hack around for a few hours until I stumbled across a solution, wihout really knowing what I did to fix things - I always just attributed the whole issue to Firefox's anal-retentive nature with respect to CSS. But CSS is supposed to be logical and this behaviour is certianly not that? Anyway, recently I decdied to get to the bottom of things once and for all, and figure out exactly what Firefox and CSS2 expected me to do.

It turns out the issue is this: The container is not stretching because the floats are "enclosed" but not "cleared." Something must clear the floats before parent end tag. And the reason I've never noticed this behaviour in IE because IE automatically encloses and clears content floats due to its "non-standard auto-enclosing behavior". In order for a container div to truly surround the divs within it, the contents must both be floated and the div must be somehow cleared at the end. The Firefox and CSS2 retards somehow IE's auto-enclosing a bug and demand that you do it manually according to CSS strict rules. Well, if you can't beat them, join them. Here are a few ways to do this:

1. <br style="clear:both;"> - after the content but BEFORE the closing tag on the container div!

Example:

<div ID="container" style="border: 1px solid black">
<div ID="nest1" style="float:left;border: 1px solid blue">content</div><!--end nest1-->
<div ID="nest2" style="float:left;border: 1px solid blue">content</div><!--end nest2-->
<br style="clear:both;" />
</div> <!--end container-->

content
content

 

2. Float the container div along with the content divs. No good if you want the container to be centered.

Example:

<div ID="container" style="border: 1px solid black;float:left;">
<div ID="nest1" style="float:left;border: 1px solid blue">content</div><!--end nest1-->
<div ID="nest2" style="float:left;border: 1px solid blue">content</div><!--end nest2-->
</div> <!--end container-->

content
content

 

3. #container:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }

Add option #3 above to your stylesheet. It instructs your CSS to add it period right after your container div and then clear both sides of it. Then, to make sure it's not seen and doesn't ruin positioning elsewhere, it hides the period from view.

I'm glad I have this finally figured out now.

Resources:
http://www.positioniseverything.net/easyclearing.html
http://www.webmasterworld.com/forum83/7739.htm

That explains a lot...

This background is: green_cup.jpg. It has an average lumosity of: 134.533333333 and came from: subtlepatterns.com
Maybe read No Big Deal, a story I consider to be the very best thing I ever wrote.