重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

floatでカラム落ちを防ぎたい

解決済

  • 質問者：hetare560
  • 質問日時：
  • 回答数：3件

少し長いですがお付き合いよろしくお願いいたします。

<style type="text/css"><!--

body {
text-align:center;
}

#all {
width:730px;
margin-left:auto;
margin-right:auto;;
text-align:left;
background-color:#33ffcc}

#left{width:50%;
float:left;}

#right{width:50%;
float:left;}

--></style>

</head>

<body>

<div id="all">

<h1>見出し1</h1>

<div id="left">

<h2>AAA</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

<h2>BBB</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

<h2>CCC</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

</div>

<div id="right">

<h2>AAA</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

<h2>BBB</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

<h2>CCC</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

<h2>DDD</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

<h2>EEE</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

</div>

</div>

このように記述するとFirefoxではallで指定した背景色がh1にしか反映されず、left、rightの高さのずれている部分には反映されません。

この記述から、スタイルシートのrightに何も指定しないようにすると、allに指定した背景色はきちんと反映されるんですが、今度はleftよりrightのコンテンツが多いためカラム落ちしてしまいます。

どのように、記述すれば背景色がうまく反映され、カラム落ちを起こさずに済むのでしょうか？

条件はFirefox,Opera,IE6でほぼ同じレイアウトが表現でき、tableやoverflowは使わない事です。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

  • 回答者： naokita
  • 回答日時：

最後の　</div>　の手前に



<br style="clear: both;">
もしくは、
<div style="clear: both;"><br></div>
や、
<div style="clear: both;">&emsp;</div>
等を入れる。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。

naokitaさまのおっしゃる通り、最後の　</div>　の手前で回り込みを解除するようにしたら、解決する事ができました。

今回はありがとうございました。

通報する
お礼日時：2007/03/08 16:41

No.3

  • 回答者： quads
  • 回答日時：

#1(実際は全角スペースでなく空白類)に加えて。



floatボックスの幅の合計値は100%未満になるように指定した方が安全です。
#left{width:49%;
float:left;}

#right{width:49%;
float:left;}

参考URL：http://www.geocities.jp/multi_column/
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。

参考になります。

今回はありがとうございました。

通報する
お礼日時：2007/03/08 16:42

No.1

スタイルに下記を追加



#all:after　{
　　　clear:　both;
　　　content:"";
　　　display:　block;
　　　}
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。

回り込みを解除していなかったのが原因だったらしく、all内で回り込みを解除するようにしたら解決する事ができました。

今回はありがとうございました。

通報する
お礼日時：2007/03/08 16:39

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報