Forums

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

*   {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

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">

<html>
<head>

     <title>TEST Sticky Footer</title>

     <link rel=\"stylesheet\" type=\"text/css\" href=\"xxxxxxx\" />

</head>
<body>


<div id=\"wrap\">
     <div id=\"main\">

          <div id=\"header\">
               This is the header DIV.
          </div>

		     <div id=\"content\">
               This is the content DIV.
		     </div>

          <div class=\"floatright\"></div>

		     <div id=\"side\">
               This is he side DIV.
		     </div>

          <div class=\"clear\"></div>

     </div>
</div>

<div id=\"footer\">
     This is the footer DIV.
</div>

</body>
</html>

Thanks,
iasiis

apostrophe

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

iasiis

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

Bless you my friend! It Works!

treehouse : what would you like to learn today?

Forums

How do I center my footer?