CSS：floatを使っての段組で困っています

解決済

質問者：docomo22
質問日時：2009/08/02 21:07
回答数：3件

図のような段組をしたいのですが、ソースはあっているでしょうか？
サイトを作成しているとズレたりするので、根本的な段組が間違っているのか見て頂けると助かります。

■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件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： abril
回答日時：2009/08/02 22:31

・添付画像のBOX-1にあたるスタイルがありませんが？それとも、BOX-1とは、<div id="container">直下に置き<div id="box-2">の前で終わる要素の事ですか？

・#box-567に相当するマークアップがありませんが？それとも、#box-5、#box-6、#box-7は#box-567の子要素に対するスタイルとして考えてますか？であればマークアップ部分は
（省略）
<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>
（省略）
とならねばなりませんん。

・box-2は幅800pxで1カラムの描画ですからfloatは不要です。

それから、各カラムの高さが全て決め打ちになっていますが、中に入る要素はその高さを超える心配のないもの（画像）ですか？
＃高さをはみ出した場合を考慮しなくても良いものですか、という事です。

- 0
- 件

通報する

この回答へのお礼

お返事ありがとうございます。
<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の部分は高さを超えた時を考えたほうがよさそうですね。

通報する

お礼日時：2009/08/02 23:25

No.3

回答者： noname#119957
回答日時：2009/08/03 23:08

#containerがフローとしていない場合。

box1:clear-both
box2:clear-both
box8:clear-both

box3:float-left
box4:float-right

box5:float-left
bos6:float-left
box7:float-right

くらいでもいけます
ただし、罫線の横線は
<div></div>を挿入してボーダーで代用してください。
簡単でしょ？

- 0
- 件

通報する

この回答へのお礼

お返事ありがとうございます。
そんな簡単なものでも良いんですね。
もっとCSSの勉強をしようと思います。

通報する

お礼日時：2009/08/04 23:33

No.2

回答者： abril
回答日時：2009/08/03 18:31

No.1です。

> box1は書かなくて良いのかと思っていました・・・

いえ、先の回答で「BOX-1とは、<div id="container">直下に置き<div id="box-2">の前で終わる要素の事ですか？」とおたずねした通り、”そうであれば（#box-1として#containerとは違う新たなスタイル（幅だけでなくボーダーや背景色など）を与えたいのでなければ）”、わざわざbox-1というコンテナを作る必要はありません。
＃対になるスタイルが見あたらなかったので、確認の為その様にお聞きしただけです。