これらのdivが重複しないようにするにはどうすればよいですか？

Question

私はコンテンツdiv内に3つのdivを持っています。

コンテナの幅70％。 その中には - 左横20％です。 - コンセント、幅60％。 - 右、幅20％。

私は、コンテナdivの20％、60％、20％を占めるように、ページの幅の70％、内側のもの（左、内容、右）を取りたいと思います。

私はここで他の質問を試みましたが、私はGoogleを試しましたが、正しい答えが見つからないようです。重複しないように助けてください。

しかし、私は、ブラウザのサイズに直したときに、div要素が重なっています。

ここでは、関連するCSSのコードがあります：このよう

#container{ 
    width: 70%; 
} 
#left { 
    float: left; 
    width: 20%; 
    min-width: 200px; 
} 
#content { 
    float: left; 
    width: 60%; 
    min-width: 600px; 
} 
#right { 
    float: right; 
    width: 20%; 
    min-width: 200px; 
} 

Answer 1

CSSからmin-widthを削除するだけです！そしてmargin: autoでmin-widthを容器に入れ、それを中央にします。

すると、このCSSを試してみてください：

#container{ 
    width: 70%; 
    min-width: 1000px; 
    margin: auto; 
} 
#left { 
    float: left; 
    width: 20%; 
} 
#content { 
    float: left; 
    width: 60%; 
} 
#right { 
    float: right; 
    width: 20%; 
} 

はここにフィドルをチェックアウト：http://jsfiddle.net/UaqU7/2/

Answer 2

分幅のCSSを取り出します。

ウィンドウの幅が一定のサイズを下回ると、これらの要素は重複することなく選択肢があります。あなたのウィンドウが1000ピクセルだとしましょう。コンテナは700ピクセルになります。しかし、最小幅では、コンテナ内のdivはすでに1000pxにあり、コンテナをオーバーフローしています。

Answer 3

あなたのCSSからmin-widthを取り出す必要があります。

ページのサイズが小さくなると、min-widthはそれ以上縮小しなくなります。したがって、重なりが生じる。

Answer 4

をここであなたが最小幅をしたい場合は、コンテナ

http://jsfiddle.net/VBSYu/1/

#container{ 
    width: 70%; 
    min-width: 1000px; 
} 
#left { 
    float: left; 
    width: 20%; 
} 
#content { 
    float: left; 
    width: 60%; 
} 
#right { 
    float: right; 
    width: 20%; 
}​ 

でそれを設定し、行きます

Answer 5

代わりに、m子供のDIVさんのの幅で#containerにすることができます。このように書く：

#container{ 
    width: 70%; 
    min-width:1000px; 
} 
#left { 
    float: left; 
    width: 20%; 
} 
#content { 
    float: left; 
    width: 60%; 
} 
#right { 
    float: right; 
    width: 20%; 
} 

チェックここでは、このhttp://jsfiddle.net/yLVsb/

Answer 6

は、その細かいhttp://jsfiddle.net/r42hH/2/