私のフローティングサイドバーでIE7がうまく動作しない

Question

私は、Webページの右上部分（ただし、ヘッダーとナビゲーションの下）に浮動し、ページのメインコンテンツを流すように動的サイズのサイドバーを取得しようとしていますそれは（ "L"の底部を除いて "L"字型のもので、実際は厚い）。サイドバーの幅と高さはページごとに異なりますので、ハードな値は使用できません。

のように私のCSSに見える

：（私は重要ではないと思うプラスいくつかのパディング、マージン、および背景色コード）

#main { 
    width: 850px; 
    height: auto; 
} 

#sidebar { 
    width: auto; 
    float: right; 
} 

私のHTMLは次のようになります。

<div id="wrapper"> 
    <div id="header"> /* header stuff */ </div> 
    <div id="nav">  /* nav stuff */  </div> 

    <div id="sidebar"> 
     /* my sidebar content, really just an h3 and a ul */ 
    </div> 

    <div id="main"> 
     /* lots of content here */ 
    </div> 
</div> 

Iドンなぜ私がサイドバーdivを最初に持っていなければならないのか完全に理解していますが、このコードはFF、Chrome、Safari（Windows）、IE8でうまく動作します。しかし、IE7（と私は気にしないIE6）では、サイドバーのdivに「クリア：left」があるかのように、メインコンテンツがサイドバーの下に押し下げられます（ただし、そうではありません） 。

IE7が他のブラウザとまったく同じように動作するため、これは悪意のあるIE7の非準拠のバグの1つであると感じています。しかし、私はそれをどのように修正するか分かりません。

アイデア？ TIA。

Answer 1

まず、IE7をstrictモードにするdoctypeを使用していることを確認してください（説明のためにhttp://hsivonen.iki.fi/doctype/を参照）。それがしなければ、マージンの幅で遊びが必要なことがあります。

最初にサイドバーdivを持つ必要があるのは、divがブロック要素として表示されているからです。メインdivをフロートさせない限り、その下に表示されます。

サイドバーdivをフローティングにして最初に置くと、サイドバーの右側にメインdivが表示されます。メインのdivにフロートを左に追加し、サイドバーdivからフロートを削除し、メインのdivの後にそれを移動することで、同様の効果を得ることができます。

Answer 2

サイドバーがあたかもブロック要素であるかのように振る舞っているように、あなたの説明からは、たぶん、インラインブロックのようないくつかの異なる表示オプションを試してみてください。また、幅の最小幅の属性を試してみます。しかし、言うことは難しい。

Answer 3

ビンゴ！一定！幅とマージンを持って遊んでいると言った人たちは、今夜金星を手に入れます。私がしなければならなかったのは、メインのdivの固定幅を取り除いてから、右側にパディングを追加して、テキストと画像の溝を作成することでした。 FF3、Chrome、Safari（Win）、そして最も重要なのはIE6 & IE7でテストされ、確認されています（IEはまだ嫌いですが）。

IEレンダリングエンジンは、「メインのdivを850pxにしたいと思っていますが、そのサイドバーを使用すると、そこにこだわったので、私はそれを押したりしなければなりませんサイドバーの下に "表示されます。もちろん、他のすべてのブラウザのレンダリングエンジンは、「おい、あなたがしようとしているものを完全に手に入れます！問題はありません。