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

仕様

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

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

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

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

<!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構造が少し気に入らないんだけど、実現することができました。