Welcome to WebmasterWorld Guest from 54.205.170.21

Forum Moderators: not2easy

Message Too Old, No Replies

Position div at bottom of page, not window

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

10+ Year Member



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?

Thanks!

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

10+ Year Member



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)

5+ Year Member



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 {
height:100%;
}
#non-footer {
min-height:100%;
}
* html #non-footer {
height:100%;
}
#footer {
height:50px; (or whatever height you have)
margin-top:-50px;
}

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

Cheers,
Mehigh

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

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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;
.

e.g.


<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;}
</style>
</head>
<body>
<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>
</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)

Suzy

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

10+ Year Member



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)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

5+ Year Member



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 :)
 

Featured Threads

Hot Threads This Week

Hot Threads This Month