3カラムレイアウトを作る場合も基本的には2カラムレイアウトと考え方は一緒です。
まずは大きいカラムと小さいカラムを左右にフロートさせ、大きなカラムの中にさらに2つの箱を左右にフロートさせていく、という考え方です。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>3カラムレイアウト</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <div id="header">#header</div> <div id="wrapper"> <div id="content"> <div id="main">#main</div> <div id="sub">#sub</div> </div> <div id="third">#third</div> </div> <div id="footer">#footer</div> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ html,body { margin:0; padding:0; } /*レイアウト部分*/ #container { width:800px; margin:0 auto; } #header { width:800px; height:300px; background:#069; } #wrapper { overflow:hidden; } #content { width:600px; float:left; overflow:hidden; } #main { width:400px; height:400px; float:right; background:#C66; } #sub { width:200px; height:400px; float:left; background:#999; } #third { width:200px; height:400px; float:right; background:#99FF99; } #footer { width:800px; height:50px; background: #F93; }