div problem in firefox..PLEASE HELP!

[K-Olsen]

Hi!
I got a problem with my container div in firefox:

[color=red]#container {
height: 100%;
width: 800px;
margin: 0 auto;
padding: 0;
text-align: left;
background: url(container_bg.gif) center repeat-y;
}[/color]

it works fine in IE but in firefox the content floats outside the container when the content gets too big. please help!

[wildteen88]

Could you provide a link/screenshot so I can see what you mean. A Link will be prefered then I can see your html/css

[K-Olsen]

[url=http://kimingemann5.wi5.ots.dk/blog/]http://kimingemann5.wi5.ots.dk/blog/[/url]

[wildteen88]

The problem is to do with the the main div (#main). As it has a float its no longer part of the same scope as the container div (#container).

WHat you'll want to do is clear the float from #main, by adding the following:
[code]<div style="clear:both;"></div>[/code]
[b]After[/b] (not before) the closing div tag for the main div (#main).

[K-Olsen]

<div id="main">
</div>
<div style="clear:both;"></div>


sry it does not work.

[K-Olsen]

any other suggestions?

thought it had something to do with height : 100%..

[K-Olsen]

problem solved:

html, body {
        height:auto !important; /* FF and compliant browsers should automatically size the body/html */
        height:100%; /* ie will set the body/html to 100%, anything overflowing that will (incorrectly) resize it. go IE */
        min-height:100%; /* when FF/etc automatically size the body/html it should be AT LEAST the height of the entire browser window, but can expand based on content. */
}

[wildteen88]

Yes its to with hieght: 100% in the #container clause. Either remove it or use min-height: 100; instead.

[K-Olsen]

I solved some of it. how do I keep the height of the container 100% regardless of how much content on the page?