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

chasetoys · 05-08-2006, 11:27 PM

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.

jonnybinthemix · 05-09-2006, 12:51 AM

This would work, however size would vary etc, because i have the size set to 800px, but you could change this.

Code:

<style type="text/css">

#bottom {
	position: fixed;
	bottom: 0px;
	width: 810px;
	height: 82px;
	border: 1px dotted black;

}

#one, #two, #three, #four, #five{

	float: left;
	width: 160px;
	border: 1px dotted black;
	height: 65px;
}



</style>
<body>

<div id="bottom">

<div id="one">
<b><i>Div One</i></b>
</div>

<div id="two">
<b><i>Div Two</i></b>
</div>

<div id="three">
<b><i>Div Three</i></b>
</div>

<div id="four">
<b><i>Div Four</i></b>
</div>

<div id="five">
<b><i>Div Five</i></b>
</div>

It works, but there may be a better way of doing it. Kinda rushed it because im on the way to bed.

Jon

chasetoys · 05-09-2006, 01:02 AM

that works so damn good... thanks so much for your help! i'm a css newb, but learning quickly!

chasetoys · 05-09-2006, 10:02 AM

I'm reading here that position: fixed doesn't work for IE6... is this true?

If so, how can I still do what I want using another method?

Thanks very much in advance!

jonnybinthemix · 05-09-2006, 11:10 AM

theres a workaround for IE6, add this:

body {height: 100%; overflow: auto; }

Then everything you want 'fixed' use 'absolute' and it will be fixed.

hope that helps

jon