footer movement (IE+FF problem)

[Anexxion]

i want the body_layout area to be 100% of the browser height and the footer to stay at the bottom but instead, I get this problem:

http://www.voigrafic.com/golfsite/

[TheJoshMan]

#footer {
background:#66CCFF none repeat scroll 0 0;
bottom:0;
height:60px;
left:0;
position:relative;
width:100%;
}
.footer_image {
bottom:0;
height:60px;
position:relative;
text-align:center;
width:433px;
margin:0 auto;
background:#66CCFF none repeat scroll 0 0;
width:100%;
float:left;
padding-top:11px;
}
.footer_copyright {
border:0 none;
color:#000000;
font-family:Tahoma;
font-size:10px;
text-align:center;
}

That works on my end... Not sure if it's "politically correct", but it works.

[TheJoshMan]

just realized that I left a big blue bar up top...

Here's the fixed CSS:

#footer {
background:transparent none no-repeat scroll 0 0;
bottom:0;
height:60px;
left:0;
position:relative;
width:100%;
}
.footer_image {
bottom:0;
height:auto;
position:relative;
text-align:center;
width:433px;
margin:0 auto;
background:#66CCFF none repeat scroll 0 0;
width:100%;
float:left;
padding:11px 0px 10px 0px;
}
.footer_copyright {
border:0 none;
color:#000000;
font-family:Tahoma;
font-size:10px;
text-align:center;
}

and the HTML you should replace:

<div id="right">
<p>RIGHT</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class="footer_image">
</div>
</div>

Basically you're just removing the DIV called "footer" and using the "footer image" div instead as there's no need for two divs to accomplish what you're trying to do.

[TheJoshMan]

did that work for you?

[Anexxion]

not exactly what I meant but thanks, basically I want it like a reapeat-x image, whenever you minimize the browser -x wize, the images just gets smaller, same with this: here is an example:

http://www.xs4all.nl/~peterned/examples/csslayout1.html

see how no matter how large the browser is, it just adjusts?

[TheJoshMan]

I think I got it... maybe? LOL

Try adding this to the CSS in the link you posted above:

#footer {
background:#66CCFF none repeat scroll 0 0;
bottom:0;
height:60px;
left:0;
position:relative;
width:100%;
clear:both;
}

I tested that out with resizing the browser window and with enlarging the text and so on, it keeps the footer stuck at the very bottom.

Hope this finally helps...

[Anexxion]

okay listen, go to http://www.voigrafic.com/golfsite/

scroll down, see how the content stretches beyond the blue footer? how can I make the footer, stay with the content no matter the height OF the content.

EDIT: OHH nvm, thanks alot man!! you have REALLY helped me, if it wasn't for you I probably would not have gotten it, thanks alot man

[TheJoshMan]

Whew! You had me starting to think that I was losing my mind... LOL

I thought for sure I'd fixed it that time, then you started saying it wasn't working!!! LOL

Anyway, I'm glad it worked out for you. Good luck!

Josh