Fixed footer & relative DIV

Question

I am soo confused right now. Coding really isn't my thing, so I believe that I messed up majorly somewhere which creates this problem:

I'm trying to make a sticky footer. The footer does stick--but only if I make my main content DIV (the white centered box) relative. I need the height of that DIV to stretch with the content (which will contain a PHP script that'll pull from my Wordpress blog--so naturally, I need it to adjust as necessary). If the DIV stretches longer than 500px, there's a weird two-scrollbars things going on, & I hate that. I like the relative DIV, but I would love to rid of all the extra scroll space, as well as making sure it stetches/regresses with content & the footer stays where it is.

I hope that's not too confusing. I'd just like someone to look over my source code & see where I'm going wrong. Thank you for any help.

http://www.missa.me/practice3.php

Answer 1

nice website :)

You need to make the footer fixed,

use this CSS

#footer {
position: fixed;
height: 80px;
clear: both;
background-color: #fff;
bottom: 0;
left: 0;
right: 0;
}

and take overflow: auto; off of #main

what this does is tell the footer to stay 'fixed' to the bottom of your viewport, so it will always stick to the bottom of your screen.. and taking overflow:auto; off will give your #main the natural ability to expand it's height depending on the content inside it.