CODEWITHSUNDEEP
htmlcss
user249468
user249468

Reputation: 31

I couldn't make my footer sticky

i'm trying to make a sticky footer for my website. i tried http://www.cssstickyfooter.com/'s method and a few others, nothing works. here's my code with the cssstickyfooter.com one.

<!DOCTYPE html>
<html lang="en-US">
<head>
<!--[if !IE 7]>
<style type="text/css">
    #wrap {display:table;height:100%}
</style>
<![endif]-->

<style type="text/css">
* {margin:0;padding:0;} 

html {height: 100%;}

body {
height: 100%;
color: #131212;
background-color: #e6e6e6;
}

#wrap {min-height: 100%;}

#main {overflow:auto;
padding-bottom: 26px;}  

#footer {position: relative;
margin-top: -26px; 
height: 26px;
clear:both;
background-color: #b0b0b0} 

body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}

h1 {
font-size: 350%
}
h6 {
font-size: 40%
}

a:link {
color: #5e5e5e;
text-decoration: none;
}

a:visited {
text-decoration: none;
color: #5e5e5e;
}

a:hover {
text-decoration: underline;
color: #5e5e5e;
}
</style>
</head>
<body>
<div id="wrap">
<center>
        <div id="header">
        <h1>my header here</h1>
        </div>
        <br />
        <div id="main">
            <h2>my content here</h2>
        </div>
    <div id="footer">
        <h3>my footer here</h3>
    </div>
</center>
</div>
</body>
</html>

what's wrong with this?

edit-a jsfiddle of this http://jsfiddle.net/2WwZf/

this works fine:

 <div id="wrap">
 <center>
    <div id="header">
    <h1>my header here</h1>
    </div>
    <br />
    <div id="main">
        <h2>my content here</h2>
    </div>
 </center>
 </div>
 <div id="footer">
 <h3>my footer here</h3>
 </div>

but when i do this, it still fails.

 <center>
 <div id="wrap">
    <div id="header">
    <h1>my header here</h1>
    </div>
    <br />
    <div id="main">
        <h2>my content here</h2>
    </div>
 </div>
 <div id="footer">
 <h3>my footer here</h3>
 </div>
 </center>

Upvotes: 0

Views: 44

Answers (2)

Goose
Goose

Reputation: 3279

Your footer div needs to be outside of the wrap div, like so:

<div id="wrap">
    <div id="header">
    <h1>my header here</h1>
    </div>
    <br />
    <div id="main">
        <h2>my content here</h2>
    </div>
</div>
<div id="footer">
    <h3>my footer here</h3>
</div>

You can also remove the <center> tags and just apply a style of text-align:center to the elements you want to center.

#wrap {
       min-height: 100%;
       text-align:center;
      }

#footer {
         position: relative;
         margin-top: -26px; 
         height: 26px;
         clear:both;
         background-color: #b0b0b0;
         text-align:center;
        }

Upvotes: 2

Cedric Reichenbach
Cedric Reichenbach

Reputation: 9319

Your footer's parent element needs to have full height (either window or content, depending on which one is bigger). Also, it needs to be positioned explicitly (relative in your case) for your absolutely positioned footer to be positioned in relation to it.

Here's a working example, based on your code: http://jsfiddle.net/z3C3F/2/

Important CSS lines:

center {
    min-height: 100%;
    overflow: hidden;
    position: relative;
}
#footer {
    position: absolute;
    bottom: 0;
}

Upvotes: 0

Related Questions