片面に余分なコンテンツを含む中央DIV

Question

私は内側divがコンテナdiv内に水平に中央揃えされており、そのコンテナ内のdivを中心divの右側に追加する必要がありますか？どのように私はつまり、それはまだないコンテナの左端と他のdivの左端の間、コンテナの中央に配置されなければならない中心のdivの位置を（乱すことなく、そうすることができますか？

<div id="container"> 
    <div id="inner"></div> 
    <div id="right"></div> 
</div> 

div#container { 
    width: 960px; 
} 
div#inner { 
    width: 400px; 
    margin: 0 auto; 
} 
div#right { 
    width: 100px; 
    float: right; 
    /* what else? */ 
} 

を理想的には、私はdiv＃rightの位置をdiv＃innerの右端からの距離としてfloat：rightを使用するのではなく指定したいと思うでしょう。

（私が今まで考えてきた唯一の解決策は、 divはdivと同じ幅で左側にdivを表示し、visible：noneに設定します）

Answer 1

親<div>：これはすぐに動作しますが、私はこのような何かをしようとするだろうかどうかについて

div#container 
{ 
    width: 960px; 
    position: relative; 
} 

div#inner 
{ 
    width: 400px; 
    margin: 0px auto; 
} 

div#right 
{ 
    position: absolute; 
    width: 100px; 
    right: 0px; 
    top: 0px; 
} 

保証。

Answer 2

両方のラッパーを追加し、相対的な配置に使用します。

<div id="container"> 
    <div id="center"> 
    <div id="inner">Some</div> 
    <div id="right">content</div> 
    </div> 
</div> 

次に、新しい中心の相対的な位置を使用し、右側の位置を「ハング」します。それを外に出すには、margin-rightという負の値を使用します。

div#container { 
    width: 960px; 
    background: red; 
} 
div#center { 
    width: 400px; 
    margin: 0 auto; 
    position: relative; 
} 
div#inner { 
    background: blue; 
} 
div#right { 
    width: 100px; 
    background: pink; 
    position: absolute; 
    right: 0; 
    top: 0; 
    margin-right: -100px; 
} 

Answer 3

明示的にあなたの容器と内側のdivの幅を設定しているので、あなたはそれがかなりのマージンを使用してより正確なピクセル長（に余白を残しています設定することで、内側のdivをセンタリングすることができます：自動車、のみ必要とされています不確定または可変幅の容器用）。あなたのコンテナは960pxで、インナーは400pxなので、中央には280pxの両サイドがあります。

float：内側と右側の両方のdivを残します。右余白を設定することで内側と右側の間のガター幅を変えることができます。

は（あなたはもちろん、結果を確認するために設定したdivまたはその高さでコンテンツのいずれかが必要です）（Firefoxで検証）、これを試してみてください：

div#container { 
width: 960px; 
} 
div#inner { 
width: 400px; 
margin-left: 280px; 
float: left; 
} 
div#right { 
width: 100px; 
float: left; 
}