CODEWITHSUNDEEP
css
Mike
Mike

Reputation: 11

Having trouble with sticky footer layout

I'm trying to make a site layout with a sticky footer and a header that go the width of the page. The content div should be 960px wide, and the height should go from the bottom of the header to the top of the footer. It should always be at least this height. Te problem i am facing right now is that I can get the content div to either be the height of it's contents or it expands past the wrap div, below where the page should end.

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-    strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <style>
html{
height: 100%;
min-height: 100%;
}

body{
min-height: 100%;
width: 100%;
height:100%;
}

#wrap{
height:auto;
height:100%;
min-height:100%;
position:relative;
margin:auto;
}

#header{
background: blue;
height: 152px;
}

#content{
background: #555;
min-height: 100%;
margin: 0 auto;
width: 960px;

}

#footer{
margin-bottom: 41px;
height: 59px;
background: red;
position:absolute;
width:100%;
bottom:0;
}
</style>

</head>
<body>
    <div id ='wrap'>
        <div id='header'>
        </div>
        <div id='content'>
        </div>
        <div id='footer'>
        </div>
    </div>
</body>

Upvotes: 1

Views: 72

Answers (1)

Kamyar Infinity
Kamyar Infinity

Reputation: 2759

You should use position:relative for all you elements under #wrap, so they will position relatively under each other, and setting height to 100% is not helpful.

You have set footer position to absolute, that would make it stick to top of the page

Upvotes: 1

Related Questions