divなどのブロックレベル要素は通常ソースで書かれた順番に上から下に縦に並びます。
しかしfloatを使う事で要素を浮かす事が出来、さらに左右どちらかの方向を指定する事で横に並べる事が出来ます。
floatを使う事でHTML内の文章構造を変える事なく比較的自由なレイアウトが作れるようになります。
なのでfloatの特性をしっかり理解し、文章構造を変える事なく色々なレイアウトを作ってみましょう。
3カラムの場合、レイアウトによってはwrapper要素の中にさらにwrapper的な要素(今回はinner_wrapper)が必要になります。
ソースコード
<body> <div id="container"> <header>header</header> <div id="wrapper"> <div id="inner_wrapper"> <div id="main">main</div> <div id="sub">sub</div> </div><!--#inner_wrapper--> <div id="third">third</div> </div><!--#wrapper--> <footer>footer</footer> </div> </body>
css
body { background: #CCC; } #container { width: 940px; margin: 0 auto; background: #FFF; padding: 10px; font-size: 36px; } header { width: 940px; height: 200px; background: #BBFEA5; margin-bottom: 10px; } #wrapper { overflow: hidden; margin-bottom: 10px; } #main { width: 400px; height: 400px; float: right; background: #FCF; } #inner_wrapper { float: left; overflow: hidden; } #sub { width: 300px; height: 400px; float: left; margin-right: 10px; background: #3FF; } #third { width: 220px; height: 400px; float: right; background: #9CC; margin-left: 10px; } footer { width: 940px; height: 100px; background: #FC0; }
またフロートの特性を覚えることで、グリッドレイアウトの作成も容易になります。
ソースコード
<body> <div id="container"> <header>header</header> <div id="wrapper"> <div id="main">main</div> <div id="sub">sub</div> <div id="third">third</div> <div id="four">four</div> <div id="five">five</div> <div id="six">six</div> </div><!--/#wrapper--> <footer>footer</footer> </div> </body>
css
body { background: #CCC; } #container { width: 950px; margin: 0 auto; background: #FFF; padding: 5px; font-size: 36px; } header { width: 940px; margin: 5px; height: 200px; background: #BBFEA5; } #wrapper { overflow: hidden; } #wrapper div { float: left; margin: 5px; } #main { width: 400px; height: 400px; background: #FCF; } #sub { width: 300px; height: 400px; background: #3FF; } #third { width: 220px; height: 195px; background: #9CC; } #four { width: 220px; height: 195px; background: #F99; } #five { width: 465px; height:200px; background: #C9C; } #six { width: 465px; height:200px; background: #FC3; } footer { width: 940px; height: 100px; background: #699; margin:5px; }