固定divはコンテナ内の他のdivと重複します

私はラッパーに2つのdivを持っています。 1つは20％の幅で左に浮動し、1つは80％の幅で右に浮動する。どちらもコンテンツを中央に配置するために、自動余白を使用して最大幅2000ピクセルを使用します。私が抱えている問題は、より広い幅ではdivが重なり始めるため、幅に関係なくdivを並べる方法がわかりません。固定divはコンテナ内の他のdivと重複します

<body> 
<div class="wrapper"> 
<div class="container"> 
</div> 
<div class="slider"> 
</div> 
</div> 
</body>

はここに私のcss

body 
    { 
    background-color: #3F3F3F; 
    } 


.wrapper 
    { 
    width: 100%; 
    height: auto; 
    max-width: 2000px; 
    margin-left:auto; 
    margin-right:auto; 
    } 

.container 
    { 
    width: 20%; 
    background-color:#F6F6F6; 
    height: 200px; 
    float: left; 
    position: fixed; 
    max-width: 2000px; 
    margin-left:auto; 
    margin-right:auto; 
    } 

    .slider { 
     width: 80%; 
     height: 2000px; 
     float: right; 
     position: relative; 
     background-color: #8A0002; 
     opacity: .2; 
     max-width: 2000px; 
     margin-left:auto; 
     margin-right:auto; 
     }

私は学生ですし、本当にすべての助けに感謝!!!：

は、ここに私のhtmlです

出典

2016-05-02 AdamLeeSFC

あなたはこのような何かをしたいですします。https：

.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; /* ie 6/7 */ }

これはあなたのCSSを行うとして<div class="wrapper clearfix">

参考にあなたのラッパーを変更、追加//jsfiddle.net/7wb8drq5/ –

position: relativeを.containerに使用してください。

position: fixedとすると、コンテナはラッパーの幅+マージンの20％として計算されているようです。

出典

2016-05-02 23:22:36

をいただき、ありがとうございます私の質問に答えるが、ナビゲーションを含むように.containerを固定しておきたい.sliderはコンテンツをスクロールすることからなる。 – AdamLeeSFC

更新

私はコメントのためにそれを保ったこの答えを無視してください。

フロートをクリアする必要があります。あなたはread more hereすることができます。

これは、これを行う方法の1つで、JSFiddleのサンプルです。か、ラッパーの中に単純に要素を追加してその要素をクリアすることができます。？Sitepoint

出典

2016-05-02 23:23:33

私の質問にお答えいただきありがとうございます。私はあなたの指示に従いましたが、CSSの変更は私のためには機能しませんでしたが、私は間違いなく浮動小数点数のクリアについて詳しく説明します。 – AdamLeeSFC

@AdamLeeSFCこの 'body {margin：0;}'を試してください。そのバイブルを無視してください。 –

固定divはコンテナ内の他のdivと重複します

答えて

関連する問題