CODEWITHSUNDEEP
htmlcsscss-positionfooter
stevendesu
stevendesu

Reputation: 16841

Forcing TWO footers to the bottom of a page

The site I'm working on now has an interesting layout that I'm having trouble getting just right in CSS. The header and footer span the entire width of the browser window, with the content confined to a 960px wide block - however there's a secondary "internal" footer within this 960px content block. Both the primary footer and this "internal" footer need to be at the bottom of the page. Here's the markup of the website, stripped down to the functional units:

<html>
    <body>
        <header></header>
        <section id="content">
            MAIN CONTENT
            <section id="internal-footer"></section>
        </section>
        <footer></footer>
    </body>
</html>

The CSS is as follows:

html{margin:0;padding:0;min-height:100%;height:100%;}
body{margin:0;padding:0;min-height:100%;position:relative;}
header{width:100%;}
footer{width:100%;height:XXXpx;position:absolute;bottom:0;left:0;}
#content{width:960px;margin:0 auto;position:relative;padding-bottom:(XXX+YYY)px;}
#internal-footer{width:100%;height:YYYpx;position:absolute;bottom:0;left:0;padding-bottom:XXXpx;}

I created a JSFiddle here (adding background colors and borders, and reducing the width of the content) to demonstrate the issue I'm having.

When there is sufficient content, everything works as intended. When there is not enough content, the #content section is not stretching and the internal footer is not only lifted, but due to the bottom-padding it is too tall. Of course being too tall isn't a serious issue since I can just set no-repeat on the background image and no one is the wiser.

So how can I force the #content to stretch to the bottom of the page, without creating a scrollbar, when there is not enough content?

Upvotes: 0

Views: 225

Answers (3)

Ricky Stam
Ricky Stam

Reputation: 2126

Changing the HTML and CSS as below is it helping achieve what you want? Now the internal footer is inside footer and also centered.

<footer>
        <section id="internal-footer"></section>
</footer>



#internal-footer{width:300px;padding-bottom:50px!important;background-color:#990;height:50px;margin:-50px auto 0 auto;}

I'm copying your comment with the working fiddler so people can find easily the solution

I've resolved the second issue - of the footer content moving. First I had to remove the negative bottom margin on the inner footer (margin:-137px auto 0 auto) then I had to add a margin to the copyright p equal to the footer padding. Update your answer to incorporate the fixes and I can accept it. Here's the final, working, fiddle: jsfiddle.net/M72fn

Upvotes: 1

Moob
Moob

Reputation: 16204

Your content area needs to be 100% of the available height. This can be done by positioning header absolutely (as you have the footer) and then making #content 100% high with padding to allow for the header and footers:

header {width:100%;position:absolute;top:0;left:0;...}
#content {display:block; min-height:100%; padding:50px 0 100px 0; ...}

http://jsfiddle.net/Ds5tX/3/

Upvotes: 0

Miquel Las Heras
Miquel Las Heras

Reputation: 760

I'm afraid that you should use javascript. Here is how I would do that with jquery:

$(document).ready(function(){
    if(($(window).height()-100)>$('#content').height()){
        $('#content').height($(window).height()-200);
    }
});

and the fiddle here

Upvotes: 0

Related Questions