- ベストアンサー
CSS:floatを使っての段組で困っています
図のような段組をしたいのですが、ソースはあっているでしょうか? サイトを作成しているとズレたりするので、根本的な段組が間違っているのか見て頂けると助かります。 ■HTML <body> <div id="container"> <div id="box-2">box-2</div> <div id="box-3">box-3</div> <div id="box-4">box-4</div> <div id="box-5">box-5</div> <div id="box-6">box-6</div> <div id="box-7">box-7</div> <div id="box-8">box-8</div> </div> </body> ■CSS body { margin: 0 auto 0 auto; padding: 0px; height:100%; } #container { width: 800px; } #box-2 { float: left; width: 800px; height: 30px; } #box-3 { float: left; width: 400px; height: 300px; } #box-4 { float: left; width: 400px; height: 300px; } #box-567 { clear:left; float: left; width: 800px; } #box-5 { float: left; width: 300px; height: 200px; } #box-6 { float: left; width: 300px; height: 200px; } #box-7 { float: left; width: 200px; height: 200px; } #box-8 { clear:left; width: 800px; }
- みんなの回答 (3)
- 専門家の回答
お礼
お返事ありがとうございます。 <div id="box-567"> (省略) </div> は記入ミスです。 box1は書かなくて良いのかと思っていました・・・ では、CSSを #box-1 { width: 800px; } #box-2 { width: 800px; height: 30px; } (下省略) にしてHTMLを <body> <div id="container"> <div id="box-1">box-1</div> <div id="box-2">box-2</div> <div id="box-3">box-3</div> <div id="box-4">box-4</div> <div id="box-567"> <div id="box-5">box-5</div> <div id="box-6">box-6</div> <div id="box-7">box-7</div> </div> <div id="box-8">box-8</div> </div> </body> をこうすれば大丈夫ですか? カラムはbox-5.6.7以外は画像で決め打ちです。 5.6.7の部分は高さを超えた時を考えたほうがよさそうですね。