Footer won't stick to the bottom - CSS-Tricks

This topic is empty.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
June 13, 2009 at 2:21 am #25142

JoshWhiteDesign
Member

This seems like a common problem for me. I’ve begun learning to use positioning like creating a container set to Relative and then giving the elements within it Absolute so I can play with side bars and the like.

However, whenever I use these methods my footer never sticks to the bottom of the page. The only way I can get it to stick is to use a traditional setups like:

<body>
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>

In these cases the footer behaves perfectly. But when I start playing with using side bars with absolutes inside of relative content elements, the footer just sits at the top of the page. Here is my sample code I’ve been playing with:

Code:

body {
background-image: url(‘images/body_bg2.jpg’);
background-repeat: no-repeat;
background-color:#000000;
margin:0px;
padding:0px;
}

#container {
position:relative;
width: 800px;
margin-right: auto;
margin-left: auto;
}

#left {
position:absolute;
top:275px;
width: 300px;
height: 300px;
}

#right {
position:absolute;
top:275px;
left:325px;
width: 300px;
height: 300px;
}

#footer {
height:50px;
}

Code:

I’ve played with positioning, making the footer different position types, making the body height auto and 100% along with the container at 100% and auto. Still doesn’t affect the footer.

Can anyone see what I’m doing wrong that I’m just blatantly missing???

June 13, 2009 at 2:36 am #59044

apostrophe
Participant

When you position things absolutely you are taking them out of the flow of the page so as far as #footer is concerned #left and #right aren’t actually there.
I can’t really see why you wouldn’t just float #left to the left and float #right to the right. I suppose you could absolutely position your footer at the bottom of the container.

June 13, 2009 at 4:08 am #59048

nasa
Member

Hi,

i had this problem yesterday, made my first CSS site from scratch thanks to this ‘tricks’ guy ;) anyay you have to ad

#footer_bg – as composed below otherwise it won’t stay down

#footer_bg {
background: #00B2EE;
width: 1260px;
hight: 60px;
border-width: 2px;
border-style: solid;
border-color: grey;
padding: 15 15 15 15px;
position: absolute;
bottom: 0;
overflow:hidden;
clear: both;

June 13, 2009 at 7:06 am #59045

EamonnMac
Member

I had this problem not so long ago. Looking at your code as it stands, I would say that giving your footer a ‘bottom: 0px’ position within the container will prove problematic as you do not have a set height for the container for the browser to know where ‘bottom’ is. The left and right divs won’t help because they’re positioned absolutely and therefore out of the flow. This probably means that your container has no height, or a height of 1px, and your footer is trying to stick to that.

Try this:

Give your html/body tags a height of 100%
Give your container a height of "min-height: 100%; height: auto !important; height: 100%;" – that’ll keep all browsers happy.
If you’re floating your left and right divs, be sure to clear the float before you close off your container. Otherwise it won’t work.

That’ll make sure that your container div is now the height of your content (minus the footer). Now you can place your footer. Just give it a ‘relative’ position of ‘top: 0px’ and sit it in your html after you’ve closed off the container. The browser will then render it stuck to the bottom of the previously relatively positioned object on the page, i.e. the container wrap. Should work….

June 13, 2009 at 7:14 am #59046

EamonnMac
Member

…as a p.s.:

If you decide you want a header as well, what i did was have my container wrap and footer as above, but placed a relatively positioned header wrap (to hold absolutely positioned H1 and H2 tags within) and a relatively positioned (top: ‘height-of-header’px) content wrap underneath, with the left and right divs floated left and right inside (you can absolutely position these), within the container. They all then stack nicely on the page.

June 14, 2009 at 1:00 am #59079

JoshWhiteDesign
Member

Thanks for the replies!

Are floats just as flexible as using the positioning methods? I keep seeing all these CSS tutorials on "proper" CSS positioning, and they all claim to use those methods, yet whenever I look at sites I really like (such as CSS-Tricks), it’s all Float based.

I mean, can Float do exactly what I’m trying to do? I guess maybe I’m banging my head against the table and I’m staring a better way to do things in the face.

June 14, 2009 at 3:31 am #59075

Rob MacKay
Participant

"xheathen" wrote:

Thanks for the replies!

Are floats just as flexible as using the positioning methods? I keep seeing all these CSS tutorials on "proper" CSS positioning, and they all claim to use those methods, yet whenever I look at sites I really like (such as CSS-Tricks), it’s all Float based.

I mean, can Float do exactly what I’m trying to do? I guess maybe I’m banging my head against the table and I’m staring a better way to do things in the face.

Floating is a completely "legal" way of making your site work :) So sure! The only time you need positioning is when you start setting for example 300px padding or margin to move an element where you want it… that’s when my ruler wraps you on the knuckles… :) Floating works with relative positioning btw :)
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

The forum ‘CSS’ is closed to new topics and replies.