Front-end Web Developer | Tampa, FL

How to place footer at bottom

Posted on: March 25th, 2010 by admin No Comments

 

This means that the footer area will always be placed on the bottom of the page, even if there is little content. I checked this code in MAC: FF, Safari; PC: IE 6/7/8, FF, GChrome

 

CSS Code:

{CODE type:php;}
* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

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

* html #wrap {
height: 100%;
}

#wrapContent {
padding-bottom: 100px;
}

#footer {
position: relative;
height: 80px;
margin-top: -80px;
background: #000;
}
{/CODE}

 

HTML Code:

{CODE type:php;}
<div id=”wrap”>
    <div id=”wrapContent”>
        Content text
    </div>
</div>

<div id=”footer”>
    Footer text
</div>
{/CODE}

 

I hope it will help 🙂

Comments are closed.