css - 中央の div の左の div を修正

Question

私は一生これを機能させることはできません。中央の div (コンテンツ) の左側に固定 div (メニュー) が必要です。ウィンドウが小さくなったときに、固定 div が左側のウィンドウの壁に触れている状態で、ページのサイズを通常どおりに変更できるはずです。

やりたいことを図にしました。

やりたいことのイメージ

編集ウィンドウのサイズを変更できるようにしたいのですが、コンテンツとメニューがブラウザの左側の壁から外れてはいけません。また、メニューは常にコンテンツに対して固定する必要があります...編集

EDIT2以下はまさに私が望んでいたことでした (xFortyFourx からの拡張ソリューション):

#body{width: 1200px; border: 1px solid #000; margin: 0 auto;}
#wrap {width: 800px;min-width: 800px;min-height: 1800px;margin: 0px auto;border: 2px #000 solid;position: relative;}
#sidebar {width: 160px;height: 100px; border: 2px #000 solid;position: absolute;top: 0;left: -180px;}
#fixed{position: fixed; width: 160px; height: 50px; background-color: #234324;}
<div id="body"><div id="wrap"><p>Content</p><div id="sidebar"><div id="fixed"><p>Sidebar</p></div></div></div></div>

EDIT2

Answer 1

HTML

<div id="wrap">
<div id="sidebar"> </div>
</div>

CSS :

#wrap {
    width: 950px;
    min-height: 400px;

    margin: 50px auto;
    border: 2px #000 solid;

    position: relative;
}
    #sidebar {
        width: 50px;
        height: 100px;
        border: 2px #000 solid;
        position: absolute;
        top: 0;
        left: -70px;
    }

編集：ここにサンプルがありますhttp://jsfiddle.net/XWkBw/

Answer 2

HTML:

<div class="main-container">
    <div class="navigation">
        nav    
    </div>
    <div class="content">
        content        
    </div>
</div>

CSS:

.main-container {
    width: 400px;
    margin: 0 auto;        
}

.navigation {
    width: 100px;
    float: left;
}

.content {
    margin-left : 110px;
}

jsFiddle の例: http://jsfiddle.net/5ZUrF/

Answer 3

この例を見ることができます：

左側固定ボックス

HTML

<div id="wrap">
<div id="sidebar"> </div>
</div>

CSS

#wrap {
    width: 500px;
    min-height: 500px;

    margin: 50px auto;
    border: 2px #000 solid;

    position: relative;
}
    #sidebar {
        width: 50px;
        height: 100px;
        border: 2px #000 solid;
        position: fixed;
        top: 50px;
        left: 60px;
    }