CSSで横の段組-センタリングするには？

解決済

質問者：penguin88
質問日時：2007/05/25 18:28
回答数：5件

CSSで横の段組をし、センタリングしたいのですが、
横の段組のために「float: left;」を使うと、
「margin:0px auto;」と指定しても左寄りになってしまいます。
「float: left;」を消せばセンタリングできるのですが、
そうすると横の段組ができなくなって困っています。
何か単純な間違いをしているのだと思うのですが、ご助言ください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： qqw55fs9k2
回答日時：2007/05/25 20:41

初めまして。

独学なので正確なスタイルシートの記述かどうか分かり
ませんが、私は普段こうしてセンタリングと横の段組をしています。

全体の枠となるボックスをセンターに配置して、その中に各ボック
スを左寄せで順々に並べていくというものです。

HTMLの記述は以下のようにしています。

<div class="box">
<div class="box_left">ここに内容</div>
<div class="box_right">ここに内容</div>
</div>

外部スタイルシートの記述は以下のようにしています。

box {
text-align:left; width:700px; height:700px; padding:0px; margin:0px auto 0px auto;
}

box_left {
float:left; text-align:left; width:300px; height:700px; padding:0px; margin:0px;
}

box_right {
float:left; text-align:left; width:400px; height:700px; padding:0px; margin:0px;
}

良かったら試してみてください。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
なるほどできました！
入れ子にするわけですよね？ありがとうございます。

通報する

お礼日時：2007/05/28 10:33

No.5

回答者： noname#31047
回答日時：2007/05/25 21:09

CSS お試しサンプル(win IE,Firefox1.5,Opera9)

body{
width:**px;/*ページの横幅*/
/*document.compatMode == 'CSS1Compat'用のセンタリング*/
margin-left:auto;
margin-right:auto;
/*document.compatMode != 'CSS1Compat'用のセンタリング(win IE)*/
_text-align:center;
}
#content{
/*document.compatMode != 'CSS1Compat'時のページの横幅(win IE)*/
_width:**px;
_text-align:left;
}
<body>
<div id="content">
.....内容物.....
</div>
</body>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
今の私には難しくてよくわかりませんでした…。
すみません。もっと勉強してからまた拝見させていただきますね。

通報する

お礼日時：2007/05/29 18:12

No.4

回答者： himajin100000
回答日時：2007/05/25 20:51

いけね

><p>やっていることは#2氏と同じ。</p>

に一応変更しておく

- 0
- 件

通報する

No.3

回答者： himajin100000
回答日時：2007/05/25 20:50

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>実験</title>
<style type="text/css">

div#container{
width:80%;
overflow:hidden; /* つけたり外したりしてみよう。大抵デフォルト値はautoなはずだ。 */
background-color:green;
margin:auto;
}
div#container div{
float:left;
background-color:green;

}

div#container div#archives{
width:30%;
background-color:blue;
}

div#container div#main{
width:70%;
background-color:red;
}

</style>
</head>
<body>
<h1>himajin100000の日記</h1>
<div id="container">
<div id="archives">

<h2>過去ログ</h2>
<ul>
<li>2007年4月</li>
<li>2007年3月</li>
<li>2007年2月</li>
<li>2007年1月</li>

<li>2006年</li>
<li>2005年</li>
</ul>
</div>
<div id="main">
<h2>2007年5月25日</h2>
<p>今日は一日中寝てた気がする。</p>

<p>気のせいだと思うけど。</p>
</div>
　　　　　　　　<p>やっていることは#2氏と同じ。</p>

</div>
</body>
</html>