Extend footer wrap to width of page

9ete picture 9ete · Jan 13, 2011 · Viewed 11.2k times · Source

I've made a footer wrap outside the content wrap (which everything else is in). I would like to make the footer wrap extend to fill the width of the page and I would like it to be fixed on the bottom. Here's the code:

footerWrap {

background-color:#000;
width: auto;

}

footer {

margin: auto;
text-align:center;
width:965px;
height:150px;
background-color:#000;
border:#000 inset medium;

}

The website is item9andthemadhatters.com please let me know if you need any other code or info. Thanks!!

update:

html { padding:0; height:100%; width: 100%; }

body{ margin: -1px 0 0 0; background-color:#FFF; font-family: calibri; background-image:url(images/item9HeaderSideFiller.gif); background-repeat: repeat-x; padding:0; height:100%; width: 100%; }

wrap {

width: 965px;
margin:auto auto;
min-height:462px;
max-height:4000

px;

footerWrap {

background-color:#000;
position:absolute;
bottom:0;
width:100%

}

footer {

margin: auto;
text-align:center;
width:965px;
height:150px;
background-color:#000;

}

}

Answer

stecb picture stecb · Jan 13, 2011

To fill the page

width:100%

To stay at the bottom of the page a solution could be

position:absolute;
bottom:0;

notice that in both body and html you have to set

padding:0
height:100%;