Jump to content

Archived

This topic is now archived and is closed to further replies.

K-Olsen

div problem in firefox..PLEASE HELP!

Recommended Posts

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!

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
[url=http://kimingemann5.wi5.ots.dk/blog/]http://kimingemann5.wi5.ots.dk/blog/[/url]

Share this post


Link to post
Share on other sites
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).

Share this post


Link to post
Share on other sites
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. */
}

Share this post


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

Share this post


Link to post
Share on other sites
I solved some of it. how do I keep the height of the container 100% regardless of how much content on the page?

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.