<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
body{
background-color:pink;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #b4ddfe), color-stop(0.30, #0d4996));
background: -webkit-linear-gradient(top, #b4ddfe 100%, #0d4996 30%);
background: -moz-linear-gradient(top, #b4ddfe 100%, #0d4996 30%);
background: -o-linear-gradient(top, #b4ddfe 100%, #0d4996 30%);
background: -ms-linear-gradient(top, #b4ddfe 100%, #0d4996 30%);
background: linear-gradient(top, #b4ddfe 100%, #0d4996 30%);
}
#container{
width:800px;
height:auto;
border:5px solid #000000;
margin:0 auto;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #dbffbd), color-stop(0.30, #285c2f));
background: -webkit-linear-gradient(top, #dbffbd 100%, #285c2f 30%);
background: -moz-linear-gradient(top, #dbffbd 100%, #285c2f 30%);
background: -o-linear-gradient(top, #dbffbd 100%, #285c2f 30%);
background: -ms-linear-gradient(top, #dbffbd 100%, #285c2f 30%);
background: linear-gradient(top, #dbffbd 100%, #285c2f 30%);
}
#header{
width:800px;
height:200px;
background-color:orange;
opacity:0.5;
}
#contents{
width:800px;
height:auto;
}
#left{
float:left;
width:150px;
height:auto;
background-color:blue;
opacity:0.5;
}
#center{
float:left;
width:500px;
height:auto;
background-color:green;
opacity:0.5;
}
#right{
float:right;
width:150px;
height:auto;
background-color:yellow;
opacity:0.5;
}
#footer{
width:800px;
height:auto;
}
#footer1{
float:left;
width:650px;
height:50px;
background-color:grey;
opacity:0.5;
}
#footer2{
float:right;
width:150px;
height:50px;
background-color:brown;
opacity:0.5;
}
.clearfix:after{
content:".";
display:block;
height:0;
font-size:0;
visibility:hidden;
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
float:none
</div>
<div id="contents" class="clearfix">
<div id="left">
<p>↑親要素にclearfix</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
</div>
<div id="center">
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
</div>
<div id="right">
<p>float:right</p>
<p>float:right</p>
<p>float:right</p>
<p>float:right</p>
<p>float:right</p>
<p>float:right</p>
<p>float:right</p>
<p>float:right</p>
<p>float:right</p>
<p>float:right</p>
<p>float:right</p>
<p>float:right</p>
<p>float:right</p>
<p>float:right</p>
<p>float:right</p>
<p>float:right</p>
<p>float:right</p>
<p>float:right</p>
<p>float:right</p>
</div>
</div>
<div id="footer" class="clearfix">
<div id="footer1">
↑親要素にclearfix<br>
float:left
</div>
<div id="footer2">
float:right
</div>
</div>
</div>
</body>