フロート右の要素がIE7の次の要素をプッシュダウン

Question

ヘッダー+コンテンツ+フッター+サイドバーで簡単なマークアップを作成しようとしています。サイドバーはヘッダーとコンテンツ要素の上に浮かなければならず、コンテンツよりも背が高い場合は、フッタを下に押してください（このように：http://jsfiddle.net/gWLFN/7/）。

HTML：

<div id="wrapper"> 
    <div id="sidebar">sidebar</div> 
    <div id="header">header</div> 
    <div id="content">content</div> 
    <div style="clear:both"></div> 
    <div id="footer">footer</div> 
</div> 

CSS：

#wrapper { width:500px } 
#header { width:500px; height:100px; background-color:red } 
#content { width:500px; height:300px; background-color:green } 
#footer { width:500px; height:100px; background-color:blue } 
#sidebar { 
    float:right; 
    margin-top:50px; 
    width:100px; 
    height:500px; 
    background-color: yellow; 
    border:1px solid white; 
} 

問題がIE7で、サイドバーは、他の要素を押し下げることです。ヘッダーとサイドバーの合計幅がラッパーの幅よりも大きいためだと思います。私は浮動小数点に関する多くの記事を見つけました：IE7の正しい問題ですが、それらのすべてがラッパーを超えない幅用です。

フッタの位置はサイドバーの高さに依存する必要があるため、絶対配置ではなく右に選択しました（誰かが絶対配置でこれを行う方法を知っていれば完璧です）。

私はこれを解決するための任意のアイデアをいただければ幸いです。

Answer 1

ほとんどの場合、HTML構造の順序がやや乱れており、ブラウザを最適に動作させるのではなく、CSSの幅を強制しています。

ネストされたCSSクラス（#sidebarを除く）から、widthの値を削除することができます。デフォルトでは、指定されている場合を除き残りの幅になります。次に、#headerと#sidebarをHTML構造で交換するだけで、かなりソートされます。

#headerと#sidebarを交換したので、margin-topは#sidebarに変更されました。

CSS

#wrapper { 
    width:500px; 
} 

#header { 
    height:100px; 
    background-color:red; 
} 

#content { 
    height:300px; 
    background-color:green; 
} 

#footer { 
    height:100px; 
    background-color:blue; 
} 

#sidebar { 
    float:right; 
    margin-top: -50px; /*changed this to -50px */ 
    width:100px; 
    height:500px; 
    background-color: yellow; 
    border:1px solid white; 
} 

HTML

<div id="wrapper"> 
    <div id="header">header</div> 
    <div id="sidebar">sidebar</div> 
    <div id="content">content</div> 
    <div style="clear:both"></div> 
    <div id="footer">footer</div> 
</div> 

の作業例：http://jsfiddle.net/gnx2z/