Search code examples
csshtmlcenterusing

Trying to center a breakout div at bottom of page

I'm trying to center a breakout div at the bottom of my page using the following CSS:

#footer {
clear: both;
position: absolute;
bottom: 0;
left: 0;
}

I've bee working on this for hours and what's really frustrating is that I got it to work earlier but broke some other things with my other two divs and made some changes that fixed the problem but since then I've been completely unable to center the footer. It just doesn't look right aligned to the left or right.

I've tried suggestions from other web sites such as setting the left and right margin to 100% and margin: 0 auto; among other things. Nothing is working and my head is spinning.

How should I approach this seemingly easy problem?

Here is my footer, in case it helps:

<footer id="footer">
<address>webmaster@mydomain.net</address>
</footer>

I also tried using align-text: center both inline and in the external stylesheet that I'm using. Before I was able to get it working using that CSS in the external stylesheet. Then I make a bunch of changes really fast without keeping a record of what I was doing.

Please help?

Solution

  • once you define position:absolute;left: 0; then margin:0 auto; will not work obviously..

    i think following trick will work for you...

    #footer {
  clear:both;
  position: absolute;
    bottom: 0;
    left:50%;
  margin-left: -100px;

}

    As you are using position: absolute; you cant use margin:0 auto;..in such cases left:50%;margin-left: -100px; is used generally to center a div horizontally

    example:: FIDDLE