HTMLボックスモデルが正しくない

ボックスモデルは常に私に頭痛を与えてきました。私はテンプレート（here）をとり、それをSpring MVC + Apache Tilesプロジェクト（here）に統合しています。 Firebugを見ると、main divのコンテンツが正しくラップされていないことがわかります。以下は、HTMLの最も外側の部分です。私はここでコードを追加しないことをお詫びしますが、ライブサイト（問題を示している）はうまくいけばそれを補っています（admin/adminでログインしてください）。HTMLボックスモデルが正しくない

<html> 
    <head> ... </head> 
    <body> 
     <div class="wrapper"> 
      <div id="header"> ... </div> 
      <div id="main"> 
       <div id="sidebar"> ... </div> 
       <div id="page"> ... </div> 
      </div> 
     </div> 
    </body> 
</html>

EDITこれが解決されているので、私は私のデモをオフラインにしています。

出典

2012-04-06 Nik

Windows 7（Firefox 11）では正常に見えます。 – tw16

関連するCSSを投稿してください。 – steveax

Firefox 11（OS X）では正常に見えず、CSSは複数のファイルにまたがっています。 HTMLのポイントは、問題がどこにあるかをすぐに示すことでした。 – Nik

#mainは、のroot.cssで定義されています。私はあなたがそれを子供をカバーするために拡大するためにdivを起動する必要があると思います。ルールセットにoverflow:auto; zoom:1;を追加することでこれを行うことができます。

出典

2012-04-06 00:55:36

はい、華麗です、ありがとうございます。 – Nik

+1私にそれを打つ。展開するには... '＃sidebar'と' #page'は浮動し、消去されません。 'overflow：hidden'を追加するとそれらがクリアされます。しかし、 '** not ** 'が'＃main'に明示的な高さを含めるようにしてください。 – steveax

これは私が他の人のテンプレートを使用したくない理由ですが、時々私はそれを回避することができません。 – Nik

HTMLボックスモデルが正しくない

答えて

関連する問題