css - 1つの固定サイズのdivを持つ1つの液体div

Question

固定幅のdivとその横に液体幅のdivがあるレイアウトを作成しようとしています：

<div id="main" style="width:100%; height:500px; background-color: #ccc;">
    <div id="right" style="float: right; width:100px; height:500px; background-color: red;">
    </div>
    <div id="left" style="float: right; width: auto; height:500px; background-color: orange;">
    </div>
</div>

左側のdivがその幅を埋めていません。また、右側のdivが存在しない場合に、このdivがメインのdiv全体を埋めるようにしたいのですが、どうすればよいですか？

Answer 1

あなたが欲しいものはもっと似ていると思います

<div id="main" ... >
  <div id="right" style="float: right; width: 100px;"> Will take up 100 px </div>
  <div id="left" style="margin-right: 100px;"> Will take up the rest </div>
</div>