3カラムリキッドレイアウト

3カラムのリキッドレイアウト（Three percentage columns）。
仕事で組む必要があったので、ついでにメモ。
＊下記CSSソース以外にもreset.cssを併用するのが前提

CSSをDisableにすると、#header（ヘッダ） #content（中央メインカラム） #navigation（左ナヴィゲーション） #extra（右エクストラ） #footer（フッタ）の順に表示。

同様のサンプルでたまにある「中央カラムの内容が左右のカラムよりも少ない場合」の表示崩れもなく安心。

CSS（初期化用のreset.cssも併用すること）

#header{
	background-color: #ccc;
}

#wrapper{
	float: left;
	width: 100%;
	background-color: #eee;
}

#content{
	margin: 0 25%;
	background-color: #e5e5e5;
}

#navigation{
	float: left;
	width: 25%;
	margin-left: -100%;
	background-color: #bebebe;
}

#extra{
	float: left;
	width: 25%;
	margin-left: -25%;
}

#footer{
	clear: left;
	width: 100%;
	background-color: #999;
}

XHTML

<div id="container">

    <div id="header">

    #header

    <!-- /header --></div>

    <div id="wrapper">

        <div id="content">

        #content / center

        <!-- /content --></div>

    <!-- /wrapper --></div>

    <div id="navigation">

    #navigation / left

    <!-- /navigation --></div>

    <div id="extra">

    #extra / right

    <!-- /extra --></div>

    <div id="footer">

    #footer

    <!-- /footer --></div>

<!-- /container --></div>

実行サンプル
お世話になったのはLayout Galaというサイトさんです。ありがとうございました。

Tags: tips