センタリング動的幅Divs

Question

私は2列のページを持っています。最初の列は動的な幅です。テーブルには表のデータがたくさん含まれています。 2番目の列は、ナビゲーション用のものでいっぱいの固定幅です。

2つの列は浮動小数点数を持つdivです。私は2つのことを達成する必要があります。

1. 2つのdivをページの中央に配置する必要があります。たとえば、最初のdivがその内側のデータによって示されるように600px幅で、2番目のdivが固定された200pxである場合、中心点は400pxです。

2. ブラウザウィンドウのサイズを変更した場合、2番目のdivを折り返してはなりません。

私は別のdivの内側に巣に2つのdivを持っていることを考えている、JavaScriptを使用して、親のdivの幅を設定し、それを中央に配置します。

説明のためにこのフィドルを作成しました。 http://jsfiddle.net/darthg8r/uhKdt/

Answer 1

はdiv要素とそれらを囲むにそのスタイルを設定します。必要な場合はJavaScriptで動的に幅を設定することができ

width: (whatever you need) 
margin: 0 auto; // this centers the div 

。それが周囲のコンテナの100％よりも小さい限り、それは中心に留まります。

Answer 2

次のコードでこれを実現できます。

HTML：

<div id="wrapper"> 
    <div id="container"> 
     <div id="variable">test</div> 
     <div id="fixed">test</div> 
    </div> 
</div> 

CSS：

#wrapper { overflow: hidden; } 
#container { 
    float: left; 
    position: relative; 
    left: 50%; } 
#container > div { 
    float: left; 
    position: relative; 
    right: 50%; 
    height: 300px; } 
#variable { 
    background: red; 
    width: 300px; } 
#fixed { 
    background: blue; 
    width: 200px; } 

プレビュー：あなたはまた、ラップすることにより、この効果を達成できるhttp://jsfiddle.net/Wexcode/mreLt/

コンテナ内の2つの要素を両方ともに設定します最後にコンテナをtext-align: centerに設定します。
答えはこれより少し複雑ですので、代わりにこのルートを選択したい場合はお知らせください。

要素が次の行に入らないようにするには、inline-blockを使用します。

<div id="container"> 
    <div id="variable"> 
     <p>test</p> 
    </div><div id="fixed"> 
     <p>test</p> 
    </div> 
</div> 

CSS：

body { margin: 0; } 
#container { 
    color: #fff; 
    text-align: center; 
    white-space: nowrap; } 
#container > div { 
    height: 300px; 
    display: inline-block; } 
#variable { 
    background: red; 
    width: 100px; } 
#fixed { 
    background: blue; 
    width: 200px; } 

プレビュー：http://jsfiddle.net/Wexcode/mreLt/2/