Forum Moderators: not2easy
I have a problem where my page background's height isn't growing automatically.
In Firefox, I can statically set the height element of div#outerContent but I need it to grow vertically automatically.
If I leave that height element out, IE shows things like I need but firefox breaks. I'm trying to code this to show correctly in FF first and IE second..
The other issue is the PageBottom div...in FF, it is centered properly using the code shown below but in IE, it is offset to the right too much...any ideas on that?
My doctype is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Here is the condensed markup:
<div id="outerContent"><%--This area is the background and encapsulates everything. This is what needs to grow vertically--%>
<div id="allContent">
<div id="pageHeader"></div>
<div id="content"></div>
<div id="pageFooter"></div>
</div>
</div>
<div id="pageBottom"></div> <%--This area is simply the 'taper'--%>
div#allContent
{
clear: none;
width: 550px;
padding: 10px;
padding-left:25px;
margin-left: auto;
margin-right: auto;
font-size: .8em;
float:left;
}div#outerContent
{
width: 650px;
height: 500px;
background-image: url(images/marketingBack.jpg);
background-repeat: repeat-y;
margin-left: auto;
margin-right: auto;
}
div#pageBottom
{
width:650px;
height: 162px;
background-image: url(images/marketingBottom.jpg);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
}
What have you inside the divv that will not grow? Let me guess: floats? In that case the behavior of FF is the right one (and IE -as usual- is broken, just to confuse you).
The solution: have something not floated (and thus part of the flow) with a clear on it under the floats.
Actually, #outerContent is not growing vertically. #AllContent is floated left ( and now I can't remember WHY lol ) but it actually performs fine. :confused:
I'll play with the floats and see what happens ;) Thanks again :D:D
