<!DOCTYPE html> <html lang="ja-JP"> <head> <meta charset="utf-8"> <title></title> <style> *{ margin:0; padding:0; } body{ 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{ clear:both; /*無効*/ 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{ clear:both; width:800px; height:auto; } #footer1{ clear:both; /*無効*/ 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; } </style> </head> <body> <div id="container"> <div id="header"> float:none </div> <div id="contents"> <div id="left"> <p>↑大枠にclear:both</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"> <div id="footer1"> ↑大枠にclear:both<br> float:left </div> <div id="footer2"> float:right </div> </div> </div> </body>