positionプロパティの設定について

質問

下記のようなposition: relative;の指定widthが100%に対して、position: absolute;を指定するdiv#innerのwidthが800pxでセンター表示されるように指定したいのですが、position: absolute;のtop: 0px; left: 0px;と記述すると当然のごとく左寄りに表示されます。

div#inner部分をpositionプロパティを使いセンター表示される記述方法があればご教授下さい。
なお、positionプロパティを使う方法のみのご回答でお願いします。

-----------------------------------------
div#footer {
position: relative;
width: 100%;
height: 250px;
margin: 0;
padding: 0;
background : url(images/footer_bg.gif) repeat-x 0 0;
}
div#inner {
position: absolute;
top: 0px;
left: ?px;
width: 800px;
margin: 0px auto 0px auto;
}
-----------------------------------------

回答No.2

Questa · ベストアンサー

position: absolute 限定であれば次の方法が一般的です。

div#inner {
position: absolute;
top: 0px;
/* left: ?px */;
left: 50%;
width: 800px;
/* margin: 0px auto 0px auto; */
margin-left: -400px; /* 800/2*(-1) */
}

1 親ボックスの左から 50% 位置に置く。（left: 50%）
2 自ボックスの幅の半分、左に寄せる。（margin-left: -400px）

お礼

ご回答ありがとうございます。
また、一般的な方法でのアドバイスは初心者の私としては大変にわかりやすく心から感謝いたします。
ご教授賜りましたとおりにcssの記述を変更し、表示確認したところ無事解決しました。

回答No.1

ORUKA1951

positionの値である、strict,relative,absolute,fixed,inheritは位置ではなく、何を基準にどう配置するかの指定です。
absoluteは、その最も近い親要素がブロックの場合、それがコンテナブロックとなりそのパディング辺を基準に配置します。そのとき、通常フローに従いません。
　この場合、通常フローとしてセンター配置するためにはpositionの値はrelativeかstatic(デフォルト)の必要かあります。
　よって
<div class="footer">
　<dl class="document-version">
　　<dt id="FIRST-PUBLISHED">First Published</dt>
　　<dd>2005-06-10</dd>
　　<dt id="LAST-MODIFIED">Last Modified</dt>
　　<dd>2011-09-10 12:00:00 (JST)</dd>
　</dl>
</div>
　の場合、
div.footer {
　　width: 100%;
　　height: 250px;
　　margin: 0;
　　padding: 0;
　　background : url(images/footer_bg.gif) repeat-x 0 0;
}
div.footer div.figure{
　　width: 800px;
　　margin: 0px auto;
}
/* 「positionプロパティを使う方法のみ」の意味が解りません。
　positionは指定しない場合、position:static;として扱われる。使っても使わなくてもpositionプロパティは生きています。
どうしても書きたければ、
position:inherit;
もしくは
position:relative;
としてください。*/

詳しくは
9.3.1 Choosing a positioning scheme: 'position' property ( http://www.w3.org/TR/CSS2/visuren.html#choose-position )

お礼

ご回答ありがとうございます。
なにぶん超初心者なもので・・・
意味不明な記述ご了承ください。