お世話になってます。
CSSで段組みをつくっています。
なるべくdivボックスを使わない
floatでなく、positionを使う
センタリングをautoでする
以上を（なるべく）考慮してやってみているのですが、
どうにもセンタリングがうまく行きません。
ボックスの中にいれないとセンタリングができないのです。
なにかいい方法はありますでしょうか？
よろしくお願いします。
こちらをどうぞ。
http://www.geocities.jp/notjustknee/hatenaq005.html
No.1
2915
301
10pt
ダミーです。
FireFoxで表示すればセンタリングできてますよ。でもIEでは無理ですね。
IEの場合も考慮するならば
body { margin:0px auto; text-align:center;}
といったようにtext-alignが必要になりますので加えてみてください。
No.2
47258
10pt
例えば左の本文(?)のある dl 要素と右のメニューの ul 要素は互いの幅を知らないので、
親ボックス無しというのはちょっと思いつきません。
サンプルは幅と位置を % 指定にしてみましたが、
ブラウザの大きさを変えれば当然幅も変わりますし、
テキストだけならともかく、画像を使うと不具合が出るでしょう。
現状のCSSでは親ボックスの使用はやむを得ないのではないでしょうか。
そうなんですよね、やっぱりダメなのかな。
そう、可変幅ならできるんですよね、うーん。
CSS始めたばっかなんですが、ボックス使わないなんて画期的！とか勝手に思っちゃって。
もうちょっと回答待ってみます。
サンプルまで作っていただき、ありがとうございました。
No.3
420
40pt
http://www.hatena.ne.jp/1109823359#
人力検索はてな - [CSS] お世話になってます。 CSSで段組みをつくっています。 なるべくdivボックスを使わない floatでなく、positionを使う センタリングをautoでする 以上を（なるべく）考..
<html>
<head>
<title>CSSをためすページ</title>
<style>
*{
padding:0px;
margin:0px;
font-style: normal;
font-weight: normal;
}
dd{
margin:0px;
}
body {
width:100%;
text-align:center;
}
body *{
text-align:left;
margin:0px auto;
}
h1{
width: 750px;
height: 60px;
position: relative;
color: #666;
background-color: #666;
}
.notmenu,h2,h3{
width: 750px;
padding-right:250px;
margin:0px auto;
z-index:1;
position:relative;
top:-70px; /* ここのサイズがクセモノですね メニューのサイズに合わせないと */
left:auto;
}
h2,h3,.notmenu *{
background-color: #EEEECC;
}
.notmenu dt{
color: #FF3333;
}
p{ padding: 5px;}
#menu{
width: 750px;
height:70px; /* 仮にです */
padding-left:500px;
margin:0px auto;
z-index:5;
position:relative;
top:auto;
left:auto;
}
#menu *{
background-color: #EEEEEE;
}
.notmenu ol{
list-style: none;
padding:5px 5px 5px 10px;
width: 80%;
border: 1px solid #CCC;
}
</style>
</head>
<body>
<h1>はてな質問</h1>
<dl id=”menu”>
<dt>メニュー</dt>
<dt>メニュー</dt>
<dt>メニュー</dt>
<dt>メニュー</dt>
</dl>
<h2>はてな質問用のページ</h2>
<h3>2005/03/03</h3>
<dl class=”notmenu”>
<dt>divボックスを使わないでセンタリングしたい</dt>
<dd>
<p>ようこそお越しいただきました。よろしくお願いします。</p>
<p>今見ていただいているような段組みを、</p>
<p>
<ol>
<li>・div要素を（なるべく）使わない</li>
<li>・floatを（なるべく）使わない</li>
<li>・できれば、両端のマージンをautoでセンタリングしたい</li>
</ol>
</p>
<p>でやりたいと思ってます。</p>
<p>ところが、なにかボックスの中に入れないとセンタリングがautoでとれないのです。あと、ボックスの中にいれないとうまくpositionもとれない…。</p>
<p>なにかいい方法はありますか？よろしくお願いします。</p>
</dd>
</dl>
</body>
</html>
http://www.hatena.ne.jp/1109823359#
人力検索はてな - [CSS] お世話になってます。 CSSで段組みをつくっています。 なるべくdivボックスを使わない floatでなく、positionを使う センタリングをautoでする 以上を（なるべく）考..
とりあえずやってみました。
メニューのたてのサイズが分からないとだめですね。
メニューの「ul」をセンタリングするとIEで不審な動作をしたので「dl」に変えました。
（「ol」もだめなようでした。）
長くなってしまってすみません。
丁寧にありがとうございます。
メニューのheight定まらないと厳しいですよね…。うーん。
まるっとdivにいれちゃえば楽なのだけど。
2
1
2
1
1
1
42
42
あ、すいません、説明たりない…。
これはボックスの中にぶちこんであるので、なるはずのつもりで作ったんです。
それが、なってないのは恥ずかしいのですが…。
これは全部、div=”inbox”の中にいれてしまっていて、それをセンタリングするつもりでした。それしか思いつかなかった…。
そうではなくて、ボックスとかにいれないで、個々の要素をautoでセンタリングするのはどうするのか？
が、知りたいことだったりします。
説明ヘタな上に例まで間違っててすいません…。