один жидкий div с одним фиксированным размером 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>