divの幅を制御しています

Question

こんにちは私は流動的なデザインを構築しようとしていますが、理由は分かりませんが、私は仕事に取り組むことができません。そのため、ウィンドウのサイズを変更してdivメニューをサイズ変更してから、divをテーマの他の要素に強制的に変更すると、ここで

は、私は現在、私は最大幅を乗り越えるときに、このdiv要素が他のdiv要素と衝突し、私のCSSのため

#stats-panel { 
    position: fixed; 
    background-attachment: scroll; 
    background-clip: border-box; 
    background-color: #ffffff; 
    background-image: none; 
    background-origin: padding-box; 
    background-position: 0% 0%; 
    background-repeat: repeat; 
    background-size: auto; 
    border: 2px solid #ffffff; 
    min-width: 680px; 
    max-width: 980px; 
    width: 100%; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    margin-bottom: 0px; 
    margin-left: 10px; 
    margin-right: 420px; 
    margin-top: 0px; 
    padding-bottom: 2px; 
    padding-left: 10px; 
    padding-right: 10px; 
    padding-top: 10px; 
    top: 58px; 
    left: 0px; 
    right: auto; 
} 

を使用しています、私は2つの要素間の20ピクセルのマージンを言う保つために何を行うことができますが、コードでありますウィンドウがリサイズされるときにこのdiv（stats-panel）のサイズを変更することができます。

Answer 1

このサイトでは、流体CSSレイアウトの多くの良い例があります。http://www.glish.com/css/index.html

Answer 2

答えは、おそらく他の要素との関係です。このdivにはposition:fixedがあるので、それは絶対的な流れと同じように通常の流れから抜け出します。その位置はブラウザのウィンドウに相対的であり、他の要素との関係は無関係です。

このdivの関係の動作を他の要素にいくらかシミュレートして、移動を開始する必要があります。これを行う方法はいくつかあり、現在のレイアウトに依存します。

Answer 3

ない全体のレイアウトは、あなたのWebページのためですが、私たちは、本体のdivとサイドバーのdivを持つ2列のレイアウトを見ていると仮定し、これはあなたが何ができるか、おそらく何であるか、あまりにも確認してください：

は、まずHTMLドキュメント内：

<div id="wrapper"> 

    <div id="main"> 
     <h2>This is the main body</h2> 
    </div> 

    <div id="sidebar"> 
     <h2>This is the sidebar</h2> 
    </div> 

</div> 

CSSへ次

#wrapper{ 
    padding:0; 
    margin:0 auto; 
    min-width:940px; 
    max-width:1280px; 
} 

    #main{ 
     margin-left:0; 
     margin-right:280px; 
    } 

    #sidebar{ 
     float:right; 
     width:250px; 
    } 

ここでの基本的な考え方は、最初のラッパーにレンジ幅の代わりに死んで値を設定することです。それに続いて、幅が固定され、流体幅を有する列を決定する。この場合は#main divの流体列に対しては固定幅を設定しないでください。代わりに、その位置にプッシュする余白を設定します。これを行うと、固定カラムと流体カラムの間に固定された「パディング」が維持されます。私の例では、この「パディング」は、ブラウザのサイズ変更方法にかかわらず、30px程度に維持されます。固定列は250pxのままで、流体列から30pxの「パディング」があり、流体列はブラウザウィンドウのサイズに応じて「可変」幅になります。

希望します;）