は2つのdivの幅に重複します

こんにちは私はメインコンテンツ（グリーンボックス）とサイドバー（ブルーボックス）の2つの列を持つウェブサイトを持っています。は2つのdivの幅に重複します

2つの列の幅を埋めるdivを作成するにはどうすればよいですか？と重複していますか？

または少なくとも緑色のdiv内に赤色のdivを作成できるのであれば、それは何とか青色の部分に重なることがあります。

enter image description here

出典

2011-02-01 raklos

ポジションを移動したり、1か所に滞在できますか？ – kamranicus

は1か所にとどまります。 – raklos

#pxは、あなたがの上からそれをしたいどのくらいあなたダウンしている赤いボックスposition: absolute; top: #pxを作る緑色のボックス
内の赤いボックスを作る緑色のボックスposition: relative
を作ります緑のボックス
もう一度、緑色のボックスoverflow: visibleと赤いボックスの幅を必要なだけ広く設定します。

レイアウトの幅が流動的な場合は、クリエイティブを取得する必要があります。ここで

くだらない例です。

<html> 
<head> 
<title>Foo</title> 
<style type="text/css"> 

    #green-box { width: 400px; background: green; float: left; position: relative; height: 300px; overflow: visible; position: relative; } 
    #blue-box { width: 100px; background: blue; float: left; height: 300px; } 
    #red-box { 
     position: absolute; 
     top: 50px; 
     width: 500px; 
     background: red; 
     height: 10px; 
    } 
</style> 
</head> 
<body> 

    <div id="container"> 

     <div id="green-box"> 
      <p>Here is some text!</p> 
      <div id="red-box"></div> 
     </div> 
     <div id="blue-box"> 

     </div> 

     <div style="clear: both"></div> 
    </div> 

</body> 
</html>

出典

2011-02-01 14:29:20 kamranicus

あなたは以下のコード

CSS

body,html {height:100%} 
    #content {width:66.6%;height:100%;background:green;float:left;} 
    #sidebar {width:33.3%;height:100%;background:blue;float:left;} 
    #floated {width:100%;height:100px;background:red;position:absolute;top:300px;}

HTML

<div id="content"></div> 
<div id="sidebar"></div> 
<div id="floated"></div>

を使用することができます

デモ：http://jsbin.com/odabe3/3

秘密は、文書の先頭からこの場合300pxには、position:abolute;でfloatedのdivを配置することです。これはまだそこにあるでしょう。スクロールするときに移動する場合は、position:absolute;をposition:fixed;に変更できます。いずれにしても、通常のフローからエレメントを取り出し、必要な場所に配置することができます。 positionの詳細については、w3のドキュメントhttp://www.w3.org/TR/CSS2/visuren.html#choose-positionを参照してください。また、ポジショニングの例と素晴らしいガイドを見つけることができますhttp://www.alistapart.com/articles/css-positioning-101/

出典

2011-02-01 14:43:44 Sotiris

デモでは、赤いボックスが横に移動しています（ie7で表示） – raklos

@raklosはい、これはフロートをクリアする必要があるためです。浮動小数点型divの前に '

'を追加すると、問題が修正されます。ここhttp://jsbin.com/odabe3/4の例 – Sotiris

は2つのdivの幅に重複します

答えて

関連する問題