html、CSS の質問です。

以下の条件すべてを満たすレイアウトを実現させたいです。

1:2カラムレイアウト
2:左は固定 width:200px、右側はリキッド
3:右側部分のコンテンツとして、<div style="float: left; width: 100; height: 100;">内容</div> が10数個ある。
4:上記内容をセンタリングして表示

実現できれば、ウィンドウ枠を広げるとリキッドの部分が広がり、内容がそれに伴って並べられ、更に、2カラムの両端の余白が均等になると思います。
html と CSS のみで教えてください。

回答の条件
  • 1人2回まで
  • 登録:2011/02/07 20:47:40
  • 終了:2011/02/09 06:06:11

回答(1件)

id:stnet No.1

stnet回答回数804ベストアンサー獲得回数342011/02/08 16:20:15

ポイント100pt

リキッドレイアウトで両端余白ってのがどういう意図か良く判らないですが

こんな感じの解釈であってますかね?

<!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>
id:AKI-NAMI

実はhttp://coban.me/というサイトでどうしてもセンタリングできないと言われ、考えていたのですが、現在見るとちゃんとセンタリングされています。

どこをどのように直したのか不明なので、上記が正解なのかどうかわかりません。

いつまでも放置というわけにもいかないので、これで回答を閉めます。

2011/02/09 06:05:50

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません