CSSレイアウト - 重複したdiv

Question

私はちょうど解決できないことを、本当にstuburnレイアウトを持っている...

- Left column - Fixed,Static (always in view) 
- Right column - Fluid/liquid/scrollable 
--- Header - fixed 
--- left/main fluid/liquid 
--- Right/sidebar - fixed width 
--- footer 

（上記明確でない場合 - ヘッダ、左/メイン、右/サイドバー、フッターです今右列INSIDE）

、作業のこのレイアウトの並べ替え、

<div id="left-col">left col</div> 

<div id="container"> 

    <div id="header">header</div> 
    <div id="main"> 
     <div id="sidebar">sidebar</div> 
     main 
    </div> 
    <div id="footer">footer</div> 
</div> 

#left-col { 
    width: 50px; 
    position: fixed; 
    background: yellow; 
    left: 0; 
    top: 0; 
} 
#container { 
    margin-left: 50px; 
    background: black; 
} 
#header { 
    background: green; 
} 
#main { 
    background: blue; 
    position: relative; 
} 
#sidebar { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 50px; 
    background: pink; 
} 
#footer { 
    background: red; 
} 

が、それでも私は1つの厄介な問題がある - 主な内容は、十分な長さでないとき を - サイドバーとフッターは、オーバーラップ.. サイドバーが絶対配置されているからです - しかし、私はそれを相対的に作成し、ページのサイズを変更するとサイドバーがメインの下に移動します。 。） 私の質問はこれです 誰もがサイドバーの下にフッタを保つ方法を持っていますか？ （jQueryのスティッキートリックは機能しません。CSSトリックはここでは非常に難しいです。） またはこのレイアウトを実現するための他の側面はありますか？

JSFIDDLE：http://jsfiddle.net/VNU6Z/

Answer 1

あなたはfloatを使用することができます右の代わりに、位置の絶対

sample

Answer 2

キムは正しいです。 div id="sidebar"フロートを作る：右を、そして作るdiv id="main"オーバーフロー：隠された

div id="main"それはフロートを持っていたかのように、あなたの浮いた要素にリサイズします：// jsfiddle：