Main

December 14, 2005

2段組レイアウト

コンテナを用意してその中に2段組にしたいブロックレベル要素を格納する。

div#container {
	width: 100%;
}
div#left {
	width: 30%;
	float: left;
}
div#right {
	width: 70%;
	float: right;
}
<div id="container">
	<div id="left">
		メニューとか
	</div>
	<div id="right">
		コンテンツとか
	</div>
</div>
<div id="next">
	まだまだ続くよ
</div>

コンテナの次にブロックレベル要素が続くなら

div#next {
	clear: both;
}

と指定する。

December 04, 2005

Strictでブロックレベル要素をセンタリング

div#block {
	margin: 0 auto;
	width: 300px;
	border: 1px solid #00f;
}

のようにmargin: 0 auto;と指定してやれば良いけど、これだとIEはバグのせいでセンタリングされない。
text-alignプロパティはインライン要素の位置揃えを指定するものだが、IEだとブロックレベル要素まで影響を受けてしまう。
このバグを逆手にとってblockを包むようなラッパーを用意して、そこにtext-align: center;と指定してやれば良い。

div#wrapper {
	text-align: center;
	border: 1px solid #f00;
}