こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

CSSの段組で要素がかけてしまいます

いつもお世話になります。
今CSSで段組をしています。
#content{
width:780px;
height:auto;
}

#content{
float:left;
width:440px;
padding-left:20px;
padding-right:20px;
}

#menu{
float:right;
width:440px;
padding-right:20px;
}
で左右のボックスを作り、
それぞれにテキストや画像などの子要素を入れていきます。
html
<body>
<div id="content">
<div id="main">
<div class="sub1">
</div>
<div class="sub2">
</div>
</div>

 <div id="menu">
<div class="sub3">
</div>
<div class="sub4">
</div>
  <div class="sub5">
</div>
<div class="sub6">
</div>
</div>
</div>
</html>
という具合です。子要素(sub)には高さ指定はしていません。
問題なのは、
firefoxでは子要素がきちんとおさまるのですが、
IE(6,7とも)右の3番目(sub5)の要素が欠落し、(飛ばされている感じ)
safariでは右の4番目(sub6)の要素が右の1番上の要素にかぶって表示されます。

どうしたらいいでしょう?どなたかご教授ください。
質問に慣れていないので、もし補足が必要であればお願いします。

投稿日時 - 2008-12-05 20:34:14

QNo.4532619

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

前者さまも指摘していますが
まず、CSSで #contentが2つあります。
次に、
<div id="main">
<div id="menu">
  ↑ ここに全角があります。

</body>も付けて下さい。

粗探しで申し訳ありませんが、正しく直すだけで自分で解決出来たり
または、修正して再質問した方が良いでしょう。

投稿日時 - 2008-12-05 21:10:55

お礼

回答ありがとうございます。
修正して再質問します。

投稿日時 - 2008-12-07 17:04:23

ANo.1

まず#contentの指定が2つあります。多分片方は#mainだと思うのでソースをそのままコピーしたのなら直してみてください。

それとwidthに関しても#mainと#menuの幅が#contentより大きいです。
これも直してみてください。

divに限らずですが、IEの場合要素の中が空のままだと上手く動かないことがあります。
適当に文字を入れて、上記を直してもう一度確認してみてください。

投稿日時 - 2008-12-05 21:02:06

お礼

ご指摘ありがとうございます。
修正して再質問します。

投稿日時 - 2008-12-07 17:04:57

あなたにオススメの質問