Parent div won't strecht with child div when child div is on float: left

Ok so the subject line basically says it all. I tried the search function, google and my local forum but had no luck at all.

My document contains:
- What I have is a container (red, min-height: 100%) which is 100% of the document.
- In it I have a header (blue, 150 px).
- Below the header, also a direct child from container, there is content-div. Who happens to have NO height.
- In this content div are 2 other divs who both are on float: left. They're both a bit greenish and contain many divs to create the effect of having a large content.

My problem is:

100% height in MULTIPLE divs

I usually have my structure laid out something like this:

<div id="all">
  <div id="page">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
  </div>
</div>

Where the body will hold a background pattern, "all" will hold a dropshadow for the page going up and down, and "page" may often have a repeating-y background as well.

I have tried variations on using the css height/min-height properties:

html, body {
    height:100%;
    ...
}
#all {
    height:100%; 
    min-height:100%; 
}
#page {
    height:100%; 

IE6 issue - background-position causing height issues

Hi guys,

I'm having a really tough time getting my head round this one. It's an IE6 bug that I've never encountered before, and haven't found anyone else having this problem either. Had a good search of this forum and trawled through about 50 google search results with no resolution.

Basically, I have a menu at the top of my page that uses background-position on the :hover event to move the bg image up/down 25px. It's using a background on the a tag and text-indent to clear the text out of the way.

Syndicate content