Forums

kanique

Any help provided would be helpful. Very new to this CSS stuff so bear with me.

I am trying to use sticky footer with this page. It works but any content more than the height of the footer is cut off. Also, the left bar background is not stretching along with the content even though background repeat is on. Here is my CSS:

html, body {
margin: 0px;
padding: 0px;
color: rgb(113, 105, 90);
background-color: rgb(255, 255, 255);
background-image: url(site/1/template/backgrd.png);
background-repeat: repeat-x;
text-align: left;
font-size: 12px;
      height:100%;

}

container2 {

position:relative;
left:0px;
top:0px;
width:1024px;
margin:0px auto -398px;
      min-height: 100%;
      height: auto !important;

}

header {

width:1024px;

}

content {

width:1024px;
      overflow:auto;
padding-bottom: 398px;

}

footer {

width:999px;
position:absolute;
margin-top: -398px; /* negative value of footer height */
height: 398px;
clear:both;
      bottom:0;

}

Here is the page: Click Here

Any help appreciated.

Paulie_D

Wow...there's a severe case of divitis going on in there isn't there.

This could take some time.

kanique

I am realizing now that I shouldn't have sliced the page into so many pieces. I apologize.

scottnix

The code on the site is horrendous, you have much bigger issues than figuring out a sticky footer.

kanique

Haha! Guess I shouldn't have used Photoshop's 'Save for Web' and save as CSS. It absolute positioned everything. If anything I will start from scratch. This is my first time designing without tables so hey.

treehouse : what would you like to learn today?

Forums

Sticky Footer does not compensate for longer content more than footer height

container2 {

header {

content {

footer {