Trying to get div to "auto extend"!

[f1ddy]

Hey guys,

Needing a bit of help with this small problem here!

Using a news script to maintain news for the website, and then calling it via php etc to be displayed on the page.

Now, on IE, the "frame" of the website (or center column div) extends fine along with the text.

However, in Firefox, it doesn't. The text continues OVER the bottom of the "frame" when it shouldn't, and the frame should expand.

Any ideas on how to fix this?

http://www.360gamerz.co.uk/beta2a.php in Firefox to see what I mean!

CSS Code

body {
margin:.5em;
padding:0;
height:100%;
background-color:#f7f9fb;
background-image:url('http://www.360gamerz.co.uk/images/body-bg.jpg');
background-repeat:repeat-x;
text-align:center;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:.9em;
}

a {
color:#03225e;
text-decoration:underline;
}

a:hover {
color:#2766A5;
text-decoration:none;
}

#centerColumn {
margin:0 auto;
height:100%;
padding:1em;
width:47em;
text-align:left;
vertical-align: middle;
background-color:#ffffff;
border:1px solid #092e54;
}

#centerColumn h2 {
margin:0 0 -.5em 0;
padding:.75em 0 0 0;
font-size:1em;
letter-spacing:.1em;
}

#header {
margin:0 0 0 0;
padding:0 0 0 0;
height:10em;
background-color:#ffffff;
background-image:url('http://www.360gamerz.co.uk/images/header-bg.jpg');
background-repeat:no-repeat;
border:1px solid #22477e;
}

#header h1 {
margin:0 0 -.6em 0;
padding:1em 0 0 1em;
font-size:1.5em;
letter-spacing:.1em;
}

#header h2 {
margin:0 0 0 0;
padding:1em 0 0 1.75em;
font-size:.9em;
font-weight:300;
letter-spacing:.1em;
}

#navtabs {
margin:0 0 0 0;
float:right;
width:100%;
height:6em;
font-size:93%;
line-height:normal;
}

#navtabs ul {
margin:0;
padding:4.1em 0 0 .2em;
list-style:none;
}

#navtabs li {
display:inline;
margin:0;
padding:0;
}

#navtabs a {
float:right;
background-position: right top;
background-repeat:no-repeat;
margin:0;
text-decoration:none; padding-left:4px; padding-right:0; padding-top:0; padding-bottom:0
}

#navtabs a span {
float:right;
display:block;
background-position: right top;
background-repeat:no-repeat;
color:#ffffff; padding-left:6px; padding-right:15px; padding-top:5px; padding-bottom:4px
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#navtabs a span {float:none;}

/* End IE5-Mac hack */
#navtabs a:hover span {
color:#000;
}

#navtabs a:hover {
background-position:0% -42px;
}

#navtabs a:hover span {
background-position:100% -42px;
color:#9ecaf6;
}


#fauxRightColumn {
position:relative;
float:right;
padding:0 .7em .25em .7em;
width:12em;
font-size:.9em;
colour:#014170
background-color:#ffffff; margin-left:.5em; margin-right:0; margin-top:.5em; margin-bottom:0
}

#fauxRightColumn h2 {
margin-bottom:-1em;
font-size:.9em;
colour:#014170
}

#fauxRightColumn ul {
margin:1.5em 0 0 0 !important;
margin:1.5em 0 0 3em;
list-style:none;
}

#fauxRightColumn li {
margin:0 0 .2em -3em;
}

#fauxRightColumn li a {
text-decoration:underline;
}

#fauxRightColumn li a:hover{
text-decoration:F7FGFB;
}

#footer {
position:relative;
bottom:0;
margin:5em 0 0 0;
padding:0;
height:4em;
line-height:4em;
text-align:center;
font-size:.7em;
background-color:#ffffff;
border-top:1px solid #cccccc;
}

Thanks!!

[mburt]

Don't specify the height of the div, and it will expand for you.

[f1ddy]

Ok, tried that, so updated CSS is...

body {
margin:.5em;
padding:0;
background-color:#f7f9fb;
background-image:url('http://www.360gamerz.co.uk/images/body-bg.jpg');
background-repeat:repeat-x;
text-align:center;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:.9em;
}

a {
color:#03225e;
text-decoration:underline;
}

a:hover {
color:#2766A5;
text-decoration:none;
}

#centerColumn {
margin:0 auto;
padding:1em;
width:47em;
text-align:left;
vertical-align: middle;
background-color:#ffffff;
border:1px solid #092e54;
}

#centerColumn h2 {
margin:0 0 -.5em 0;
padding:.75em 0 0 0;
font-size:1em;
letter-spacing:.1em;
}


(removed the height: 100% but still no change in FF...

[mburt]

Hmm.. as funny as this may seem, I see no problem whatsoever if FF.

[mburt]

Also, use [ code] tags around your code snippets, its a scrolling frame (doesn't use as much room.)

ex.

[ code] test[/ code]

(remove spaces)

[f1ddy]

That is really weird... a SS of what I see is...

http://www.360gamerz.co.uk/line.JPG

Edit: Will remember the [code] for next time

[mburt]

I don't understand? That looks perfectly normal? Can you give me a screenshot of what it's supposed to look like, say, if it works in IE, or Opera etc.

[f1ddy]

Ok fixed it! Should have checked properly... it wasn't in the actual style.css but on the page itself... removed the height and it shows up fine!

If you look now, that was how it was supposed to be. Basically ALL of the news in the "box" of the website (so no copyright in the middle of it all).

Thanks very much for your help mate!

[mburt]

Oh, okay. No problem

[Twey]

However, in Firefox, it doesn't. The text continues OVER the bottom of the "frame" when it shouldn't, and the frame should expand.

Wrong. IE, as is so often the case, is exhibiting the incorrect behaviour. The standards say that the content of an element with an explicitly-defined height should expand outside the borders of the element if there is no way to make it fit inside (like line-wrapping).