CODEWITHSUNDEEP
htmlcss
user2367386
user2367386

Reputation:

White gap under the footer

On my site here, the footer is white at the end when the padding-bottom isn't enough and wondered if someone could help diagnose.

Here's the footer CSS:

#footer {
color:#E0E0E0;
max-width:1280px;
margin:0 auto;
padding:1.45em 2% 0.4em;
}

And I'm wondering if the right-nav equal column CSS is affecting it:

.right-nav {
float: right;
width: 29.4%;
border-left: 1px solid #Dddddd;
padding-top:2em;
padding-bottom:10040px;
margin-bottom:-10000px;
}

Any ideas would be great.

*Update: this page here has a huge gap too, which is why I'm wondering if the right-nav has anything to do with it.

Upvotes: 0

Views: 123

Answers (3)

Qvcool
Qvcool

Reputation: 458

Using this should work. Here is a jsFiddle example of it in action.

#footer {
    bottom:0px;
    position:absolute;
}

Upvotes: 0

trajce
trajce

Reputation: 1490

if i understood you right then you need to add overflow to your footer

#footer
{
overflow:hidden;
}

Upvotes: 0

jamil
jamil

Reputation: 555

Sounds like you want to use a sticky footer.

http://ryanfait.com/sticky-footer/

This is the best tutorial I've found on the web. You may have to do some tweaking to your site's structure, though.

What this does is essentially forces the footer to always be at the bottom of the page, no matter what the size of the content. If the content is large enough, it sits at the bottom of the page as it should.

Upvotes: 2

Related Questions