How do I center my footer?

[iasiis]

Hi,

I started making a site and used the sticky footer technique here:

http://www.cssstickyfooter.com/using-sticky-footer-code.html

I put in all the code and everything is good besides the footer. The footer just does not want to stay centered so it is aligned with the #wrap div.

And here is my code:

CSS

Code:

* {margin:0; padding:0;}

html, body, #wrap {height: 100%;}

.floatleft {float: left;}
.floatright {float: right;}
.clear {clear: both;}

body > #wrap
{
height: auto;
min-height: 100%;
background: cyan;
width: 1000px;
margin: 0px auto -100px;
min-height: 100%;
height: auto !important;
height: 100%;
}

#main
{
padding-bottom: 150px;
height:100%;
background: orange;
}

#header
{
width: 1000px;
height: 100px;
background: yellow;
}

#content
{
float:left;
height: 200px;
width:800px;
background: blue;
}

#side
{
float:left;
height: 200px;
width:200px;
background: purple;

}

/* negative value of footer height */
#footer
{
width:1000px;
position: relative;
margin-top: -150px;
height: 150px;
clear:both;
background: red;
}

clearfix:after {content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac */
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

HTML

Code:

This is the header DIV.

This is the content DIV.

This is he side DIV.

This is the footer DIV.

Thanks,
iasiis

[iasiis]

"apostrophe" wrote:

Code:

#footer {
margin:-150px auto 0;
}

Bless you my friend! It Works!

[Author]

Posts