My footer won't go to the bottom of the page

[sreynaert]

Any help with this?

My footer won't go to the bottom of the page:

bestbluesguitarlessonsonline dot com


This is my CSS code for the body, wrapper and footer:


body
{
font-size: 100.01%;
padding: 0px;
position: relative;
text-align: center;
padding:bottom: 60px;
margin: 0px;
height: 100%;


}

#wrapper
{
width:53%;
position:relative;
min-height: 100%;
height: auto !important;
height: 100%

}

#wrapper2
{
width:72%;
float:left;
position: relative;
padding-bottom:20px;
padding-bottom: 50px;


}
#wrapper2 .item-page
{
width: 100%;


#footer-outer
{
float: left;
margin:0 auto;
clear: both;
height:60px;
width:900px;
position: relative;
bottom: 0px;
top: max-height;

}




#footer-inner
{
float:left;
width:900px;
margin:0 auto;
font-size:0.8em;
padding:10px 15px 15px 10px;


}


Hope anyone can help me out.

Thanks

[JefferyJamison]

HI ! I put this example i hope you will get your Solution.

html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}

And one simple CSS rule for IE 6 and IE 5.5:

#container {
height:100%;
}

[L0adOpt1c]

Did you validate both pages?

[Excavator]

Hello sreynaert,
You style #footer-outer from both layout.css and position.css. One entry tells #footer-outer to be floated left but also has top positioning, the other entry has position: absolute; but the bottom positioning is being overridden by your conflicting CSS.

Look what happens when you comment out some CSS as highlighted in red below -

layout.css:

#footer-outer
{
        padding:0;
		position: absolute;
		bottom: 0;
		/*left: 0;
		right: 0; */
}

position.css:

#footer-outer
{
  height:60px;
  width:900px; 
  /*position: absolute;
  bottom: 0px;
  top: 0px;
  clear: both;
  float: left;
    margin:0 auto; */


}

The push method of building a full height layout has never been my favorite. Look at a better (I think) method here.


When posting code in the forum, please use the code tags, - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.

[jerry62704]

I see a lot of duplication of IDs between several sheets. In addition to the ones above, you also duplicate many things in positions.css and personal.css.