Centering *and* absolute positioning an image?

[Torniojaws]

Well, I ran into problems in making a picture centered to the bottom of the page;

HTML

<div id="logo"><img src="logo.jpg" alt="Logo"></div>
<div id="pohja"><img src="pohja.jpg" alt="Pohja"></div>

CSS

#pohja {
position: absolute;
bottom: 0px; 
text-align: center; }
#logo { 
position: relative;
top: 15px;
text-align: center; }

The problem is, that the image (pohja.jpg) won't center. It aligns itself properly to the bottom of the page, but it is no longer centered. It goes to the left side of the page bottom.
If I use "position: relative; bottom: 0px;", then the picture will overlap the top picture (logo.jpg) and is not on the bottom of the page. It is centered, though.

[isitreal]

Try setting an explicit width on the pohja element, say 100%, that might help.

[D_Blackwell]

How is this?

#pohja {
position: relative; margin: 100% auto; text-align: center;
}

It works in IE6 and Firebird, but there may be other factors involved. (100% may be too much, and will other boxes affect it?)

[xdev]

Try this:

CSS

<style type="text/css">
body {
background: #fff;
color: #000;
margin: 0px;
padding: 0px;
height: 100%;
}
div { margin: 0px; padding: 0px; }
#container {
height: 100%;
width: 100%;
position: absolute;
}
#logo, #pohja {
left: 50%;
margin-left: -71px;
position: absolute;
}
#logo { top: 15px; }
#pohja { bottom: 0px; }
</style>

HTML

<div id="container">
 <div id="logo"><img src="http://www.google.com/images/google_sm.gif" alt="Logo"></div> 
 <div id="pohja"><img src="http://www.google.com/images/google_sm.gif" alt="Pohja"></div>
</div>

margin-left: -71px; refers to the width of the image. The example image I used is 143px and both the divs have a left: 50%; rule applied. So for a true centering all that's needed is to divide the widths in half and apply that to the left margin. See here for a reference:
[wpdfd.com...]

-xDev