5

I am writing a webpage with a fixed footer on the bottom of the page. The content of the page has a specific width and is centered. The footer also has a specific width and must be centered.

Issues:

  1. I cant use postiton: fixed - footer is not centered
  2. Page content is loaded dynamically from a database, so I can't know the exact height
  3. If the browser window is very small, the footer hits the content and covers it. A z-index hardly fixes it because I have a gradient on the background set like a body background.

So I would need something like float: bottom....

Daniel.P.
  • 480
  • 2
  • 8
  • 19

2 Answers2

14

Although the other answers do work, you should avoid using negative margins.

Try this:

.footerholder {
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    position: fixed;
    text-align: center;
    width: 100%;
}

.footer {
    background: none repeat scroll 0 0 blue;
    height: 100px;
    margin: auto;
    width: 400px;
}

And the HTML would be:

<div class="footerholder">
    <div class="footer">
    ....
    </div>
</div>

---------- Edit ------------

You should also ammend your over all page size, as to take into consideration the height of your footer - otherwise you will never see the bottom content

My Head Hurts
  • 37,315
  • 16
  • 75
  • 117
6
.footer{
    position:fixed;
    bottom:0;
    left:50%;
    margin-left:-200px; /*negative half the width */
    background:red;
    width:400px;
    height:100px;
}

Check working example at http://jsfiddle.net/qdVbR/

Hussein
  • 42,480
  • 25
  • 113
  • 143