ansaurus

Question

Force <div></div> to the bottom of the web page centered.

Answer 1

A:

Try this: Fixed footers without Javascript. I don't know if it will be a perfect fit, but I think it's close enough.

Srdjan Pejic 2009-02-04 19:47:17

Doesn't work when resizing the browser for me. Looks good otherwise -- snaps to the bottom of the document or, if the document doesn't scroll, to the bottom of the viewport (instead of just floating).

strager 2009-02-04 20:13:21

Answer 2

A:

You can just give the div a:

clear:both; text-align:center;

and put the div as the last element before the closing body statement. That would force it to be the last element without anything next to it.

jeroen 2009-02-04 20:01:19

Answer 3

+9 A:

I think what you're looking for is this: http://ryanfait.com/sticky-footer/

It's an elegant, CSS only solution!

I use it and it works perfect with all kinds of layouts in all browsers! As far as I'm concerned it is the only elegant solution which works with all browsers and layouts.

@Josh: No it isn't and that's what Blankman wants, he wants a footer that sticks to the bottom of the document, not of the viewport (browser window). So if the content is shorter than the browser window, the footer sticks to the lower end of the window, if the content is longer, the footer goes down and is not visible until you scroll down.

tharkun 2009-02-04 20:02:15

Is the footer always visible? Regardless of scroll position?

Josh Stodola 2009-02-04 23:28:03

Thanks for clarifying!

Josh Stodola 2009-02-06 15:39:29

Answer 4

A:

Your best bet is to use javascript to determine the size of your page. You can get the height with window.innerHeight with non-IE browsers and document.documentElement.clientHeight with IE. With that value you should be able to absolutely position your element on the page setting top to that value minus the height of your div. If the height of your div is variable you will need to check the div's offsetHeight property to get the real height.

For centering use the following example:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
     <style>
      .wrapper
      {
       width: 100%;
       padding-left: 50%;
      }
      .test
      {
       width: 400px;
       margin-left: -200px;
       border: 1px solid black;
       padding-left: -200px;
      }
     </style>
    </head>
    <div class="wrapper">
    <div class="test">This is a test</div>
    </div>
 </html>

You have a wrapper div around the div you want centered. The wrapper div has a width of 100% the inner div has a width set to whatever you want it to be. Give the wrapper div a left padding of 50% and the inner div a negative left margin equal to half of its width.

Ross Pace 2009-02-04 20:20:07

-1 because it talks about the viewport, that's not what he wants!

tharkun 2009-02-04 20:34:20

Answer 5

+2 A:

I just want to be clear on what your saying here:

bottom of the web page (the document, not the viewport)

Naturally, a div will be at the bottom of the "document", depending on your layout.

If it's not going to the bottom of a document, or not paying attention to how tall your columns are, is it because your floating? Clear: both; would be in order to solve that.

The sticky footers are what I think your looking for, but when you say document, and not the viewport, I get a bit confused. Sticky footers typically do this: Watch for short pages, and if its shorter than the view port, the sticky footer tacks the footer div to the bottom.

Here's some sticky footers (there's gajillions of em, but this is in order of my favorites):

http://www.cssstickyfooter.com/
http://css-tricks.com/sticky-footer/
http://ryanfait.com/sticky-footer/ (listed previously)
http://brassblogs.com/blog/sticky-footer
http://alistapart.com/ (theres one there I just can't find it)

Maybe if you gave a quick illustration or were a bit more specific on what you want? Hope this helps :D

-Ken

Ken Hanson 2009-02-04 20:35:58

I think he just ment that if the document is longer than the viewport, the footer should not show until you scroll to the end. which is a sticky footer. with position absolute you would get a sticky viewport-footer which is in most cases ugly.

tharkun 2009-02-04 21:27:06

Answer 6

+3 A:

If I understand you correctly, you want the toolbar to always be visible, regardless of the vertical scroll position. If that is correct, I would recommend the following CSS...

  body {
    margin:0;
    padding:0;
    z-index:0;
  }

  #toolbar {
    background:#ddd;
    border-top:solid 1px #666;
    bottom:0;
    height:15px;
    padding:5px;
    position:fixed;
    width:100%;
    z-index:1000;
  }

See an example here: http://blog.josh420.com/examples/footer.htm

Best regards...

Josh Stodola 2009-02-04 23:23:39

+1 Helps for me. Thnx

Martijn 2009-02-05 08:42:38

Josh, any cross browser issues with this technique?

Blankman 2009-02-05 14:13:25

Well, I know that IE6 doesn't support fixed positioning. But I tried it in IE7 and FF2 and it works.

Josh Stodola 2009-02-05 15:54:03

This doesn't work in Safari on the iPhone... dang.

Hector Scout 2010-03-15 21:53:42

@Hector I wonder if adding position:relative to the body fixes that

Josh Stodola 2010-03-16 04:15:24

position:relative makes it so it doesn't stick to the bottom.

Hector Scout 2010-03-16 16:54:11

ansaurus

tags:

views:

answers:

Force <div></div> to the bottom of the web page centered.

related questions