homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Position div at bottom of page, not window

 5:15 pm on Feb 10, 2007 (gmt 0)

I'm finally replacing table layout w/ CSS positioning -- and loving it! One thing's driving me insane, though.

How do I position my box at the bottom of the page? I'm getting it at the bottom of my browser window -- midpage if I've got a long page.

Here's the offending code:

<div name="BottomBar" style="z-index: 2; position: absolute; left: 0px; bottom: 10px; width: 100%; background-image:url(/images/Brick_Tile2.JPG);"><b>This is the new bottom bar</b></div>

What did I do wrong?




 5:33 pm on Feb 10, 2007 (gmt 0)

I changed my site from tables to CSS last summer.

One thing that jumps out at me is the postition:absolute. This will remove an element from the document's flow and postion it in relation to the top-level element ('body'). Maybe try 'static,' or better 'relative' postioning?

[edited by: Wonderstuff at 5:34 pm (utc) on Feb. 10, 2007]


 3:45 am on Feb 11, 2007 (gmt 0)

What you want is a "footer" that sticks either to the bottom of the screen, if the page is short... and to the bottom of the page, on the other case. If this is what you need.. check this code out. (at first make a basic, simple test, and apply it later to your site).

This is the css code:

html, body {
#non-footer {
* html #non-footer {
#footer {
height:50px; (or whatever height you have)

And the markup
<div id="nonfooter">
All of your page's content - NOT absolutely positioned, but relative or static
<div id="footer">
the part you want to be sticked to the bottom of the screen/page



 9:54 am on Feb 12, 2007 (gmt 0)

This will remove an element from the document's flow and postion it in relation to the top-level element ('body').

this is half right ;)
It [the AP element] is removed from the flow, BUT it is not necessarily positioned in relation to the 'top-level element' It will be positioned in relation to its containing block [w3.org]- if not controlled/specified the 'inital containing block' is the viewport.

4. If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:..

So if your footer is the absolute element you would want to make sure one of its container / ancestor element (note ancestor and not sibling) whichever holds the longest content - into a containing block - you can do this by adding position: relative;.


<style type="text/css" media="screen">
#header, #footer {background: #eee;}
#content {background: #ffc;}
#wrapper {border: 1px solid #000; width: 600px; margin: 0 auto; padding-bottom: 60px; position: relative;}
#footer {position: absolute; bottom: 0; left: 0; width: 600px; height: 50px;}
<div id="wrapper">
<div id="header">header content</div>
<div id="content">all content in here - including columns/sidebars if any</div>
<div id="footer">This is the new bottom bar</div>

This isn't a great example as the footer here would naturally stay at the bottom, but it's for illustration of the containing block scenario only

The wrapper div is the ancestor/parent for header, footer and content which are all siblings

position: relative; on the wrapper div is what is deciding the containing block in this sample as it's an ancestor of the footer - if you remove it the AP footer will go down to the bottom of the viewport (the default containing block)



 6:48 pm on Feb 14, 2007 (gmt 0)

Thanks! Will give this a try.

I looks like Absolute positioning is half my problem. That's what made the most sense at first, but evidently is not the best choice.


 10:39 pm on Feb 14, 2007 (gmt 0)

but evidently is not the best choice

it might very well be the best choice for your scenario!, please don't give up on it totally, it is there for a reason (if it were useless it would be deprecated by now?) and I believe DW relies on it quite heavily by default?

floats may well be the more stable choice x-browser wise just now despite vicious rumours to the contrary but they are not the be all/end all


 9:54 pm on Feb 15, 2007 (gmt 0)

It has already been said in a round-about way but, getting rid of the position:absolute and simply having the 'bottom' div as the last element on the page is a far simpler way to do it. maybe a clear:both wouldnt go amiss :)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved