Jump to content


Photo

div problem in firefox..PLEASE HELP!


  • Please log in to reply
8 replies to this topic

#1 K-Olsen

K-Olsen
  • New Members
  • Pip
  • Newbie
  • 7 posts

Posted 08 October 2006 - 10:33 AM

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

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


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

#2 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 08 October 2006 - 11:24 AM

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

#3 K-Olsen

K-Olsen
  • New Members
  • Pip
  • Newbie
  • 7 posts

Posted 08 October 2006 - 11:40 AM

http://kimingemann5.wi5.ots.dk/blog/

#4 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 08 October 2006 - 11:49 AM

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:
<div style="clear:both;"></div>
After (not before) the closing div tag for the main div (#main).



#5 K-Olsen

K-Olsen
  • New Members
  • Pip
  • Newbie
  • 7 posts

Posted 08 October 2006 - 11:59 AM



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


sry it does not work.

#6 K-Olsen

K-Olsen
  • New Members
  • Pip
  • Newbie
  • 7 posts

Posted 08 October 2006 - 12:00 PM

any other suggestions?

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

#7 K-Olsen

K-Olsen
  • New Members
  • Pip
  • Newbie
  • 7 posts

Posted 08 October 2006 - 12:22 PM

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. */
}

#8 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 08 October 2006 - 12:23 PM

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

#9 K-Olsen

K-Olsen
  • New Members
  • Pip
  • Newbie
  • 7 posts

Posted 08 October 2006 - 01:09 PM

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




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users