floatを使ったレイアウト14
絶対配置するボックスの親ボックスを作る
ソースコード【 HTML 】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>絶対配置するボックスの親ボックスを作る</title> <link rel="stylesheet" href="css/style14.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"> <header><br>1段目<br> </div><!-- / header --> <div id="wrapper"> <div id="primary"> <primary><br>1段目<br>2段目<br>3段目<br>4段目<br>5段目<br>6段目<br>7段目<br>8段目<br>9段目<br>10段目<br> </div><!-- / primary --> <div id="secondary"> <secondary><br>1段目<br>2段目<br>3段目<br>4段目<br>5段目<br>6段目<br>7段目<br>8段目<br>9段目<br>10段目<br> </div><!-- / secondary --> </div><!-- / wrapper --> </div><!-- / container --> </body> </html>
@charset "UTF-8"; #container { width: 760px; background-color: #6c7;/* [ width,height ]を指定すると背景色が反映される */ } #header { background-color: #ddd; height: 80px; } #wrapper { position: relative; background-color: #c7b;/* [ width,height ]を指定すると背景色が反映される */ } #primary { position: absolute; left: 210px; top: 10px; background-color: #c7d5ed; width: 550px; } #secondary { position: absolute; left: 0px; top: 10px; background-color: #f9cfba; width: 200px; }
ブラウザで表示