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

danwellman 5600
2
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 :)

Answered about 7 years ago by danwellman
  • Hmmm... tried that, but no-go. Take a look at the HTML source and tell me if I did something wrong. Andy Baird about 7 years ago
0
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 :) ).

Answered about 7 years ago by Jens Hedqvist