これは以前に多くの回答があったと確信していますが、私が見つけることができるのは、左側に固定列、右側に動的列を必要とするソリューションだけです。私の状況は、左側に動的列が必要で、右側に固定列が必要であるという点で異なります。
私はこれを機能させていますが、左 (動的サイズ) 列内に追加の列を構築しようとするとすぐに、右 (固定幅) 列の下に落ち、ページの幅全体を埋めます。
私が実際に必要としているのは、動的な列が固定された右側の列に侵入しないことです。
さらに、左と右の列が固定されている左側の動的列に 3 つの列の別のセットが必要ですが、中央は使用可能な残りのスペース (前述の左側の動的列内) の 100% を使用します。
簡単に言えば、ページ上に 2 つの列が必要で、それらの間でページ幅の 100% を使用し、右側の列は固定幅です。左の列の内側には、外側の固定列を無視する固定列と動的列も必要です。
以下のコード例では、黒い境界線を持つ div をページの右側に接着し、幅を固定する必要があります。赤い境界線の div は、黒い境界線の div よりもページの右側に移動してはならず、緑とオレンジの境界線の div は、赤い境界線の全幅にする必要があります。緑の境界線を持つ div の中央の div は、緑の境界線のある div の左右の列の間のすべての利用可能なスペースを使用する必要があります。
私は以下に持っているコードを入れました
<div id="Wrapper" style="width: 100%;">
<div id="Container">
<div id="right" style="border: solid 10px black; width: 300px; margin-left: 50px; float: right;">
Fixed right hand column
</div>
<div id="left" style="border: solid 10px red;">
<div>
<div style="border: solid 10px green; float: left;">
<div style="border: solid 1px black; text-align: center; width: 150px; margin-right: 10px; float: left;">
Left
</div>
<div style="border: solid 1px black; text-align: center; width: 150px; margin-left: 10px; float: right;">
Right
</div>
<div style="border: solid 1px black; text-align: center; width: 100%;">
Centre
</div>
</div>
<div style="clear: both;"></div>
<div style="border: solid 10px orange;">
<asp:Panel runat="server" ID="DynamicWidthPanelForLeftColumn" BackColor="#6699ff" Height="250px">
This panel should use just the left column but instead uses the entire width of the page.
</asp:Panel>
</div>
</div>
</div>
</div>