CODEWITHSUNDEEP
csspositioningfooter
Ed Harrison
Ed Harrison

Reputation: 53

Footer sitting too far up page

My footer sits where I want it to when there is enough content above it to 'push' it to the bottom of the page (http://v3.edharrisondesign.com/), but without content it sits too far up (http://v3.edharrisondesign.com/about/).

Any ideas why?

Upvotes: 0

Views: 2912

Answers (3)

Paulo R.
Paulo R.

Reputation: 15619

If you search google for sticky footer you'll find that this is a common problem with a few solutions. Anyway, I took a look at your site and here's what you need to do:

1) to the html's ruleset, add this:

height: 100%;

2) body's ruleset:

-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
min-height: 100%;
padding-bottom: 80px; /* same as footer's height */

3) footer:

position: absolute;
bottom: 0; /* you already have this */

This solution takes advantage of the box-sizing property. If supporting older browsers is a requirement, it won't work - you'll need an extra element in the html for that (let me know if this is what you want).

Great looking site, btw!

Upvotes: 2

streetlight
streetlight

Reputation: 5968

What John's saying is that there needs to be a container between your header and footer, with a minimum height so that you give the browser a set amount of pixels you would like between the two, no matter what. For the homepage, it is "thumbnail-continer", but on your internal page it looks like you dont have any content well at all. Either way (whether you place the thumbnail container in the internal page or create a new div altogther), create a content well on each page and give it the minimum height you would like it.

Upvotes: 0

John_C
John_C

Reputation: 1176

thumbnail-container{min-height:400px}

will work in ie7/8/9 and the other main browsers. IE6 will ignore it.

Upvotes: 0

Related Questions