html - フロート要素をその親の幅全体に適用する方法

Question

下の図をご覧ください。

私はdiv（バウンディングボックス）を持っています。このdivには、両方とも左に浮いている2つの浮いたdivが含まれています。2番目のフロートdiv（赤いもの）をバウンディングボックス内の使用可能なすべてのスペースまで幅を拡張するにはどうすればよいですか。

現在、私はjavascriptを使用していますが、CSSにこれに対する解決策はありませんか？

編集：

これが私のHTMLの構造です

<div id='container'>
    <div id='side'>
    </div>
    <div id='main'>
    </div>
</div>

私のCSSは多かれ少なかれ次のようです

#container {
     width: 100%;
     position: relative
     overflow: hidden;
}

#side {
     width: 200px;
}

#main, #side {
     float: left;
}

次に、jqueryを使用して#mainの幅を設定します

$('#main').width($("#container").width() - $("#sideview-sidebar").width());

私はJSを避けようとしていることに注意してください。

ここに画像の説明を入力してください

score 1 · Accepted Answer

浮く#left

#left {
  float: left;
  width: 200px; /* eg. */
}

のマージンを設定し、#mainフロートさせないでください。

#main {
  margin-left: 200px;
}

柔軟性を高めたい場合は、に別のdivを追加し#main、そのパディング/マージンを設定します。

score 0 · Accepted Answer

上記のパーセントを使用したソリューションが最適です。パディング/マージンについては、パーセントで設定する必要があります。次に、それは例のためである可能性があります：

#side
{
   width:12%; padding:0 2%; margin:2%;
}
#main
{
   width:78%; margin-right:2%
}

2 に答える 2