float｜ブロック要素のレイアウト

下記の要素を作る

floatのオブジェクトを抱えるブロック要素を作る

wrapperの幅700px
containerの幅500px
sidebarの幅200px

#wrapper{
          margin:20px auto;
          width:700px;
          height:auto;
          background-color:#0000CD;
          overflow:auto;
        }
#content{
         float:left;
         width:450px;
         height:300px;
         background-color:#FFFF00;
        }
#sidebar{
         float:right;
         width:200px;
         height:300px;
         background-color:#CD853F;
        }

ここでもし「overflow:auto;」を指定しないと「wrapper」がなくなる
「overflow:auto;」を設定することをfloatで浮かんでしまっているものを射影するイメージでwraperの中に存在しているように扱える。

ヘッダーとフッターを作る

#header{
 width:700px;
 height:100px;
 background-color:#AFEEEE;
}

フッターも同様

この状態でブラウザでプレビューするとずれているはず。。。

ヘッダーとフッターの場所を合わせる

header
wrapper(content+sidebar)
footer

これらを囲むdivをid="cantainer"指定で作成する。

CSSは下記のとおり

#container{
 width:700px;
 height:auto;
 margin:50px auto;
}

「overflow:auto;」を使わずにカラム落ちを回避する

カラム落ちを回避するためにはfooterでfloat指定をクリアする必要がある

#footer{
 clear:both;
 width:700px;
 height:100px;
 background-color:#AFEEEE;
}

headerとwrapper、footerを覆うブロック要素

上までの手順だとヘッダーとフッターがずれてしまうため、
全てを包含するブロック要素を作り全体に対して再度CSSを定義する。

最終形

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>floatの授業</title>
<style type="text/css">
<!--

body{background-color:#000000;}
#container{
 width:700px;
 height:auto;
 margin:50px auto;
}

#header{
 width:700px;
 height:100px;
 background-color:#AFEEEE;
}
#wrapper{
 margin:20px auto;
 width:700px;
 height:auto;
 background-color:#0000CD;
/* overflow:auto;*/
}
#content{
 float:left;
 width:450px;
 height:300px;
 margin:0 50px 20px 0; /* sidebarとcontentの長い方に設定する */
 background-color:#FFFF00;
}
#sidebar{
 float:right;
 width:200px;
 height:300px;
 margin:0 0 20px 0; /* sidebarとcontentの長い方に設定する */
 background-color:#CD853F;
}
#footer{
 clear:both;
 width:700px;
 height:100px;
 margin-top:20px;
 background-color:#AFEEEE;
}

-->
</style>
</head>
<body>
<div id="container">
  <div id="header">header</div>
  <div id="wrapper">
    <div id="content">content</div>
    <div id="sidebar">sidebar</div>
  </div>
  <div id="footer">footer</div>
</div>
</body>
</html>