Footer Problems! (5 Side by Side DIV elements, at bottom of the page)

So what I want is a footer that is *always* at the bottom of my browser window (I’m only optimizing for Internet Explorer if that makes a difference)…..

But I want it to be comprised of 5 side by side DIV elements.

I’ve also got a container DIV elements where everything is inside of it.

I’ve tried two methods with varying results:

1) Make the footers have absolute positioning with bottom =0. This makes it so one DIV element is at the very bottom but the other 4 don’t show up
2) Make the footers relative positioning, this makes it so that they are side by side, but occur after the last element (in other words, not at the very bottom).
3) I tried putting the footers inside/outside the wrapper DIV with no effect.

Here is the code:

#footer1, footer2, footer3, footer4, footer5{
color: #dbdfee;
height: 65px;
width: 20%;
text-align: left;
background-color: transparent;
background-image: url(img/bg_top.png);
background-repeat: repeat-x;
background-position: bottom;
margin-top: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0%;
position:relative;
clear: none;
float: left;

}

#footer5{
width: 19.95%;
float: left;
}

#wrapper-page{
width: 100%;
background: #b4c2d4 url(img/bg_grad.png) repeat-x center top;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
position: relative;
min-height: 100%;
}

Ideas?

Thanks very much in advance!

This is also a question of style… if you’re going to have different things going on in each DIV I thought you should divide it into different DIVs… I want to make sure my 5 DIV approach is actually correct.
chasetoys is offline Reply With Quote

Also in #CSS _↴