If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
Fixing Divs That Won’t Nest Properly
Sometimes you’ll be designing a page and you’ll have an outer div, with two nested divs, one floated left (say for a menu), and the other floated right (say for the page content).
But when you run your page, the container div refuses to contain the two floated divs. Sometimes the divs are also wrapping. First you should ensure that the container div is about 30px wider than the two divs it’s supposed to contain. Add temporary borders to all the divs so that you can see what you are doing.
Once the divs are no longer wrapping, you’ve reduced the problem to getting the dives to nest properly.
Code might look something like this :
<div id="maincolumns" style="border:#FF0066 solid 2px">
<p>Text at the top of the containing div</p>
<div id="leftthin" style="border:#0066FF solid 2px">
some menu items
</div> <!-- end of leftthin -->
<div id="rightthick" style="border:#33CC00 solid 2px">
<h1>My Article Heading</h1>
<p>
Lorem ipsum dolor sit amet . . .
</p>
<p>
Vivamus imperdiet . .
</p>
</div> <!-- end of rightthick -->
<div style="clear:both"></div>
<p>Text at the bottom of the containing div</p>
</div> <!-- end of main columns -->
But instead of nesting, it produces output like this, where the two floated columns are outside the container column.
The Solution
You can easily fix the problem by adding overflow:hidden to the style of the containing div. And when you do, this is the result.
{ 1 comment… read it below or add one }
Boy O Boy I wish I had searched for this 4 hours ago. My CSS was not being my friend and this fixed it. Thanks!