floatを使ったレイアウト１９ - 実践するWEBサイト制作

三段目のボックスを配置する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>三段目のボックスを配置する</title>

<link rel="stylesheet" href="css/style19.css" media="screen,print">

</head>
<body>

<div id="container">

<div id="header">
&lt;header&gt;<br>１段目<br>
</div><!-- / header -->

<div id="wrapper">

<div id="primary">
&lt;primary&gt;<br>１段目<br>２段目<br>３段目<br>４段目<br>５段目<br>６段目<br>７段目<br>８段目<br>９段目<br>１０段目<br>
</div><!-- / prinary -->

<div id="secondary">
&lt;secondary&gt;<br>１段目<br>２段目<br>３段目<br>４段目<br>５段目<br>６段目<br>７段目<br>８段目<br>９段目<br>１０段目<br>
</div><!-- / secondary -->

<div id="adv">
&lt;adv&gt;<br>１段目<br>２段目<br>３段目<br>４段目<br>５段目<br>６段目<br>７段目<br>８段目<br>９段目<br>１０段目<br>
</div><!-- / adv -->

</div><!-- / wrapper -->

<div id="footer">
&lt;footer&gt;<br>１段目<br>
</div><!-- / footer -->

</div><!-- / container -->

</body>
</html>

ソースコード【 CSS 】

@charset "UTF-8";



body {
    background-color: #aa6;
    }

#container {
    width: 100%;/* ボックスの幅を指定 */
    background-color: #6c7;
    }

#header {
    height: 50px;
    background-color: #ddd;
    }

#wrapper {
    position: relative;
    margin: 10px 0;
    width: 100%;
    background-color: #ccd16c;
    }

#primary {
    margin: 0 155px;/* 左右方向に155pxのマージンを指定する */
    background-color: #c7d5ed;
    }

#secondary {
    position: absolute;
    left: 0;
    top: 0;
    width: 145px;/* ボックスの幅を変更 */
    background-color: #f9cfba;
    }

#adv {
    position: absolute;	/* 値に[ absolute ]を指定 */
    right: 0;/* 右からの配置位置を指定 */
    top: 0;/* 上からの配置位置を指定 */
    width: 145px;/* ボックスの幅を指定 */
    background-color: #e5c7ed;
    }

#footer {
    height: 50px;
    background-color: #ddd;
    }

ブラウザで表示