I have an outer div set to position:relative (which happens only for IE7, and has to be done through javascript due to a bug I'm running in to when loading flash objects)
The problem is the center of the page (the inner div) is running right out of the outer div.
How can I make this extend the outer div naturally instead of bleeding past the container?
2 answers
points
It's most likely related to the floats on the left-sidebar, right-sidebar and blog-wrap containers.
When an element has floated children, it's last child needs to clear the float or the container collapses in this way.
There are several solutions but the easiest in this situation is probably to add a new div after the blog-wrap container and give it the following css:
.clear {
clear:both;
height:0;
width:100%;
}
That should fix it :)
- Hmmm... tried that, but no-go. Take a look at the HTML source and tell me if I did something wrong.
points
#main needs a collapsible float fix. Try adding overflow: hidden to it (or any other fix for that particular situation).
Because you are floating every element inside it, it thinks it has no content. It think's this because floats, like positioned elements exist in their own space. There are three different kinds of flows: static (normal flow), positioned and float. More info about the Visual Formatting Model can be found in the W3C specs (okey okey, I admit the W3 specs arent the hottest material around. There are good books out there as well, grab a copy of Eric Meyers CSS The Definite Guide and you'll never have this problem again :) ).
