以下の条件すべてを満たすレイアウトを実現させたいです。
1：２カラムレイアウト
2：左は固定 width:200px、右側はリキッド
3：右側部分のコンテンツとして、<div style="float: left; width: 100; height: 100;">内容</div> が10数個ある。
4：上記内容をセンタリングして表示
実現できれば、ウィンドウ枠を広げるとリキッドの部分が広がり、内容がそれに伴って並べられ、更に、２カラムの両端の余白が均等になると思います。
html と CSS のみで教えてください。
No.1
804
34
100pt
リキッドレイアウトで両端余白ってのがどういう意図か良く判らないですが
こんな感じの解釈であってますかね?
29
29
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title></title>
<style>
* {margin:0;padding:0;}
#wrap {width:85%;margin:0 auto;}
#main {float:right;width:100%;margin:0 0 0 -200px;background:#efe;}
#main #inner {margin:0 0 0 200px;}
#main #inner .box {float:left;width:100px;height:100px;border:solid 1px #000;}
#side {float:right;width:200px;background:#eef;}
</style>
</head>
<body>
<div id="wrap">
<div id="main"><div id="inner">
<div class="box">内容</div>
<div class="box">内容</div>
<div class="box">内容</div>
<div class="box">内容</div>
<div class="box">内容</div>
<div class="box">内容</div>
<div class="box">内容</div>
<div class="box">内容</div>
<div class="box">内容</div>
<div class="box">内容</div>
<div class="box">内容</div>
</div></div><!-- /main -->
<div id="side">
<p>サイド<br>
サイド<br>
サイド<br>
サイド<br>
サイド<br>
サイド<br>
サイド<br>
サイド<br>
サイド<br>
サイド<br>
サイド<br>
サイド<br>
サイド<br>
サイド<br>
サイド<br>
サイド</p>
</div>
</div>
</body>
</html>
1
1
実はhttp://coban.me/というサイトでどうしてもセンタリングできないと言われ、考えていたのですが、現在見るとちゃんとセンタリングされています。
どこをどのように直したのか不明なので、上記が正解なのかどうかわかりません。
いつまでも放置というわけにもいかないので、これで回答を閉めます。