floatを使ったレイアウト実践

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

サンプルサイト：Layout Gala

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>floatを使ったレイアウト</title>
<style>
　ここにCSSを記述
</style>
</head>
<body>
<div id="container">
<div id="header">#header</div>
<div id="nav">#nav</div>
<div id="wrapper">
<div id="content">#content</div>
<div id="sidebar">#sidebar</div>
</div><!-- /#wrapper -->
<div id="footer">#footer</div>
</div><!-- /#container -->
</body>
</html>

html, body, div {
  margin: 0;
  padding: 0;
}
body {
  background: #CCC;
}
#container {
  width: 780px;
  background: #FFF;
  margin: 0 auto;
  padding: 10px;
}
#header {
  height: 120px;
  background: #B1DAF0;
  margin-bottom: 10px;
}
#nav {
  height: 60px;
  background: #FFE3F1;
  margin-bottom: 10px;
}
#wrapper {
  overflow: hidden;
  margin-bottom: 10px;
}
#content {
  float: left;
  width: 500px;
  height: 200px;
  background: #F2E9BC;
}
 #sidebar {
  float: right;
  width: 270px;
  height: 200px;    
  background: #CFFAAB;
 }
#footer {
  height: 80px;
  background: #7FC4BF;   
}

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

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

段組レイアウトの注意点

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

IE6対策の是非は、おいておきます
2015年時点で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のバグとその解決方法】