0

I have a 600px wide footer graphic that I want to be positioned in the center of the page. I currently have it fixed at the bottom of the browser, which is what I want - I want the content to scroll from underneath the footer, if you know what I mean. With the fixed value my footer hangs on the left. With a value of relative, its centered, but stuck to the bottom of the page, and I end up having a load of blank white space to scroll down until I see the footer. Infact, removing the whole position: property has the same effect as the relative value.

How can I fix this?

I attempted ideas here - How to horizontally center a <div> in another <div>? but none of them worked =[

CSS

#footer {
position: fixed;
margin-top: -110px; 
height: 110px;
width: 600px;
margin: 0 auto;
clear:both;
bottom: 0;

}
Community
  • 1
  • 1
Brett Glogoski
  • 15
  • 5

2 Answers2

1

html:

<div class="footerWrap">
  <div class="footer"></div>
</div>

css:

.footerWrap {
    width:100%;
    position:fixed;
    bottom:0;
}
.footer {
    margin:auto;
    width:600px;
    height:110px;
}

working demo

hope this help

jhunlio
  • 2,550
  • 4
  • 26
  • 45
0

Try this

html, body, and other div relative {
   width: 100%;
}


#footer {
    position: fixed;
    margin-top: -110px; 
    height: 110px;
    width: 600px;
    clear:both;
    bottom: 0;
    left: 50%;
    margin-left: -300px; /* half size of footer */
}
baqtiste
  • 78
  • 1
  • 6
  • I didn't add the width 100% bit at the top as it caused havoc with the rest of my page, but the footer stuff worked a treat. Thanks! – Brett Glogoski Apr 12 '13 at 02:00