floatを使ったレイアウト - web-0127のブログ

CSSレイアウト

idセレクタの前に「div」を書くのか書かないのか。
迷います。

過去には「div」から記述していましたが、現在では少しでもデータ量を減らす意味もあり記述しない傾向にあります（企業の記述ガイドラインで判断します）

floatプロパティを使ったレイアウト

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>floatを使ったレイアウト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="content">content</div>
<div id="sidebar">sidebar</div>
<div id="footer">footer</div>
</div>
</body>
</html>

@charset "utf-8";

html, body, div {
	margin: 0;
	padding: 0;
}
body {
	background-color: #CCC;
	text-align: center; /* IE6対策 */
}
#container {
	width: 780px;
	margin: 0 auto;
	padding: 10px;
	background-color: #FFF;
	overflow: hidden;
}
#header {
	height: 50px;
	margin-bottom: 10px;
	background-color: #C2FCFB;
}
#content {
	float: left;
	width: 500px;
	height: 300px;
	margin-bottom: 10px;
	background-color: #F8FEBC;
}
#sidebar {
	float: right;
	width: 270px;
	height: 300px;
	background-color: #FECAFF;
}
#footer {
	clear: both;
	height: 50px;
	background-color: #DCDBFD;
}

floatと親ボックスの「高さ」

これ以外の方法もあるのですが、この時点ではこの方法を指定します。

段組レイアウトの注意点

IE6で、マージンが２倍になってしまうバグ

IE6対策の是非はおいておきます

下記のコードで、IE6はマージンが20pxになります。

#sidebar{
　float: left;
　width: 200px;
　margin-left: 10px;
}
#content{
　float: right;
　width: 500px;
　margin-right: 10px;
}

マージンが２倍になってしまうバグは、「display:inline;」で解決します。

#sidebar{
　float: left;
　width: 200px;
　margin-left: 10px;
　display: inline;
}
#content{
　float: right;
　width: 500px;
　margin-right: 10px;
　display: inline;
}

width を指定したボックスには border も padding も指定しない
フロートのコンテナブロックには幅を指定する

【IE6でよく遭遇するCSSのバグとその解決方法】