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

基礎 CSS


片側だけのフッターを配置する


ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<title>片側だけのフッターを配置する</title>

<link rel="stylesheet" href="css/style16.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 id="footer">
&lt;footer&gt;<br>１段目<br>
</div><!-- / footer -->

</div><!-- / primary -->

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

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

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

</body>
</html>

ソースコード【 CSS 】

@charset "UTF-8";



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


/* [ width,height ]を指定することにより[ background-color ]が表示される */
#container {
    width: 760px;
    margin: 0 auto;
    text-align: left;
    background-color: #6c7;
    }

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


/* [ width,height ]を指定することにより[ background-color ]が表示される */
#wrapper {
    position: relative;
    background-color: #ccd16c;
    }

#primary {
    position: absolute;
    left: 210px;
    top: 10px;
    width: 550px;
    background-color: #c7d5ed;
    }

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

#secondary {
    position: absolute;
    left: 0;
    top: 10px;
    width: 200px;
    background-color: #f9cfba;
    }

ブラウザで表示