- 締切済み
CSS 段組で要素が表示されません
いつもお世話になります。 今CSSで段組をしています。 #content{ width:910px; height:auto; } #content{ float:left; width:440px; padding-left:10px; padding-right:10px; } #menu{ float:right; width:440px; padding-right:10px; } で左右のボックスを作り、 それぞれににsubを作ってテキストや画像などの子要素を入れていきます。 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> </body> という具合です。子要素(sub）には高さ指定はしていません。 問題なのは、 firefoxでは子要素がきちんと表示されているのですが、 IE（６，７とも）右の2番目(sub4)の要素を表示せず、（飛ばされている感じ） safariでは右の4番目(sub6）の要素が右の1番上の要素にかぶって表示されます。 全体の高さとしては右側の段組の方が高さがあります。 実際にはそれぞれのsubにテーブルやテキスト、画像などが入っています。 何が原因でしょう？どなたかご教授ください。 質問に慣れていないので、もし補足が必要であればお願いします。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- naokita
- ベストアンサー率57% (1008/1745)
＞問題なのは、 ＞firefoxでは子要素がきちんと表示されているのですが、 ＞IE（６，７とも）右の2番目(sub4)の要素を表示せず、（飛ばされている感じ） ＞safariでは右の4番目(sub6）の要素が右の1番上の要素にかぶって表示されます。 ＞全体の高さとしては右側の段組の方が高さがあります。 ＞safariの方はダメです。 ------------------------------- ＃１です。 こちらのsafariが古いのかと試しにSafari3.2.1に上げて見てみましたが 上記のような現象が全くわかりません・・・ 再度確認しましたが修正したHTMLで問題なさそうです。 全て正常に見えるのですが中のコンテンツの配置問題じゃないでしょうか？ 状況や質問をオープンにしないと回答は難しいですね。
- naokita
- ベストアンサー率57% (1008/1745)
前回答者（指摘した者）です。 ・２個目の#contentを#mainに変更。 ・<div id="menu"> と <div class="sub5"> の前の全角スペースを排除 ・clear:bothを指定。 とりあえず、わかり易いように、文字、ボーダーラインを一時的に設定。 で、以下のようにしたいのではと勝手に想像しましたが、 以下を、新規HTMLで保存して確認・比較してみてください。 ----------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- #content{ width:920px; border: 1px solid #000; } #main{ float:left; width:440px; padding-left:10px; padding-right:10px; border: 1px solid #f00; } #menu{ float:right; width:440px; padding-right:10px; border: 1px solid #00f; } --> </style> <title>CSS 段組</title> </head> <body> <div id="content"> <div id="main"> <div class="sub1">左1</div> <div class="sub2">左2</div> </div> <div id="menu"> <div class="sub3">右3</div> <div class="sub4">右4</div> <div class="sub5">右5</div> <div class="sub6">右6</div> </div> <div style="clear:both"></div> </div> </body> </html>
お礼
ご回答ありがとうございます。 何度も同じ指摘をされて恥ずかしい限りですが。。。 そのようにしたいと思い、IE,FireFoxでは実現できています。 問題になっているソースにはdivの前に全角スペースなどはないのです。 一応IEの方は、文字間隔を広げてあったのを排除したら修正できましたが、 safariの方はダメです。 また何か思い当たることがあれば是非教えてください。 よろしくお願いします。
お礼
何度もお答えいただき、ありがとうございました。 結局、フロートのクリアがきちんとできていないという 初歩的なミスでした。 本当にありがとうございました。