floatを使ったレイアウト１７

基礎 CSS


両側をまたぐフッターを配置する


ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>両脇をまたぐフッターを配置する</title>

<link rel="stylesheet" href="css/style17.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><!-- / primary -->

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

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

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

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

</body>
</html>

ソースコード【 CSS 】

@charset "UTF-8";



/* [ container,wrapper ]共に幅指定あり */

body {
    text-align: center;
    background-color: #aa6;
    }

#container {
    text-align: left;
    margin: 0 auto;
    width: 760px;
    background-color: #6c7;
    }

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

#wrapper {
    position: relative;
    margin: 10px 0;	/* 上下方向に10pxのマージンを指定 */
    width: 100%;/* ボックスの幅を指定 */
    background-color: #ccd16c;
    }

#primary {
    /* [ position ]の指定を削除 */
    margin-left: 210px;/* 左方向に210pxのマージンを指定 */
    background-color: #c7d5ed;
    }

#secondary {
    position: absolute;
    left: 0;
    top: 0;/* 上方向からの配置位置を変更 */
    width: 200px;
    background-color: #f9cfba;
    }

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

ブラウザで表示