CSS - Content appearing outside a div

I'm having some trouble with my web page. A picture probably descibes it best so here it is:

http://a.imageshack.us/img837/8223/skjermbilde20100902kl18.png

The text at the bottom is supposed to be inside the white area. I want the white div to change in height depending on the content. I have a div that centers the white area in the middle:

#mainContainer {
  margin开发者_开发问答-left: auto;
  margin-right: auto;
  margin-top: 20px;
  width: 800px;
  min-height: 700px;
  height: 100%;
}

I have also set html and body to 100%. But the problem is that the div stays at 100%, no matter how much content there is. Now a really strange thing happens when I set height to auto:

http://a.imageshack.us/img837/8295/skjermbilde20100902kl18y.png

This is how it should look (and how it does look using height: 100%):

http://a.imageshack.us/img837/7112/skjermbilde20100902kl18b.png

The full page can be found here (click on "Om oss" to see the page with the misplaced text)

I would really appreciate it if someone could figure out what the problem is! :-)

(Hopefully the CSS and HTML is easy to understand)

Edit: I just noticed that it renders properly in Safari, but not in Firefox.

---

You have given html and body a height of 100%. (Many child divs also have height:100%.) What this means is that they are 100% of the size of the viewport, not the content. IOW, they are limited by the height of the browser window, and any content that stretches below this will be outside of any backgrounds applied.

Edit: To further elaborate, you have set up the background images (drop shadows) on the left and right on empty divs that you tried to stretch using height:100%, but since they do not contain anything, they can only be the height of the parent elements, which are themselves the height of the veiwport. When you set the html and body (or any other intermediate element) to height:auto, these divs (mainContainer-middle-left and -right) collapse to the size of their content, which is nothing.

You should probably reconfigure the html so these elements are parents of the actual content and get rid of all "height:100%" statements. They don't mean what you think they mean!

---

Stian,

For the div #mainContainer, set the height to auto.

For the div #mainContainer-middle, set the height to 550px.

That should fix your layout issues.