CSS リキッドデザインで３段組 |

CSSのレイアウトで思いっきりつまずきました。

仕様

メインコンテンツ(center)がHTMLの最初に書かれる
メインコンテンツが収縮するリキッドレイアウトにする
absoluteを使わずにfloatで作成する

（３段組のレイアウトで、左をleft,真ん中をcenter,右をrightとしてdivのIDを付ける)

ネックは、floatを設定すると幅サイズを設定しなければいけないこと、またメインコンテンツを最初に持ってこなければ比較的簡単になるが、それではだめという事

散々苦労したあげく、なんとか実現できました。１段組、２段組、３段組、共通したロジックで記述可能です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
<!--
*{
margin: 0;
}
#wrapper3{
background-color: red;
width: 100%;
float: left;
margin-right: -50px;
}
#right{
background-color: green;
width: 50px;
float:left;
}
#left{
background-color: blue;
width: 50px;
float: right;
}
#wrapper2{
background-color: yellow;
width: 100%;
float: right;
margin-left: -50px;
}
#wrapper2 #center{
margin-left:50px;
}
#wrapper3 #center{
margin-right:50px;
}
h1{
margin: 10px;
}
#clear {
clear: both;
}
-->
</style>
</head>
<body>
<h1>3段組</h1>
<div id="wrapper3">
<div id="wrapper2">
<div id="center">
<p>
Center
あ
あ
あ
</p>
<h1>aaa</h1>
</div>
</div>
<div id="left">
left
</div>
</div>
<div id="right">
right
</div>
<div id="clear"></div>
<h1>2段組</h1>
<div id="wrapper2">
<div id="center">
<p>
Center
あ
あ
あ
</p>
<h1>aaa</h1>
</div>
</div>
<div id="left">
left
</div>
<div id="clear"></div>
<h1>1段組</h1>
<div id="center">
<p>
Center
あ
あ
あ
</p>
<h1>aaa</h1>
</div>
</body>
</html>

wrapper構造が少し気に入らないんだけど、実現することができました。