Forum Moderators: not2easy
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!
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]
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
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;Suzy
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.
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
