Footer + Layout Issues

Hi guys,

I'm having some issues sticking my footer to the bottom of my page.

Problem is, I've used absolute positioning for pretty much all elements on the site, and since some of the content on my site is dynamic, I can't absolutely position the footer aswell. However, if I try floating it or anything else, the footer doesn't know where to go as everything else is absolutely positioned.

My source code is a little long and alot is irrelevant, so I'll just provide a link and you can see the source code in the browser.

Here's the site: http://mc-airlines.hostei.com/

If you replying to these relatively soon, you'll probably see the footer stuck in the middle not knowing what to do

So - can you guys help me out? I've tried using different positioning rules, however due to the 'exactness' I require, no other form of positioning can do the job.

How can I stick that footer to the bottom without resorting to absolute positioning or changing all my CSS positoning?

Thanks in advance!

Try this:

Add to your CSS:

Code:

html, body {
height: 100%;
}

then to your footer make it:

Code:

#footer {
height: HEIGHT;
position: relative;
}

Then add at the end of your content:

Code:

<div class="clearfooter"></div>

and then add to css:

Code:

.clearfooter {
height: HEIGHT OF FIRST FOOTER;
clear: both;
}

Thanks for your reply, drogba921.

I've tried doing as you instructed, however unfortunately it didn't work. Any other ideas? :/

Thanks.

Try putting the footer inside the

Code:


<div class="clearfooter"></div>


Thanks for your response Vanilla990, but that didn't work either