Footer + Layout Issues

View previous topic View next topic Go down

avatar
mlazim14
Member
Member
Forum Posts : 3
Member Since : 2012-03-05
View user profile

Postmlazim14 on 5/3/2012, 2:17 pm

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 Razz

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!
avatar
Mike
Administrator
Forum Posts : 446
Member Since : 2011-10-28
View user profile http://www.codinghelp.org

PostMike on 5/3/2012, 4:34 pm

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;
}
avatar
mlazim14
Member
Member
Forum Posts : 3
Member Since : 2012-03-05
View user profile

Postmlazim14 on 7/3/2012, 9:57 am

Thanks for your reply, drogba921.

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

Thanks.
avatar
Vanilla990
Administrator
Forum Posts : 114
Member Since : 2011-10-30
View user profile

PostVanilla990 on 7/3/2012, 10:12 am

Try putting the footer inside the
Code:

<div class="clearfooter"></div>
avatar
mlazim14
Member
Member
Forum Posts : 3
Member Since : 2012-03-05
View user profile

Postmlazim14 on 8/3/2012, 8:28 am

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

PostSponsored content

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum