Создание div, размер которого относительно div с фиксированной шириной и содержащей области?

Question

У меня есть содержащий div (contentBody), ширина которого N%. В этом div у меня есть два других div, contentLeft и contentRight.

contentLeft всегда 205px. Я хочу, чтобы contentRight автоматически заполнял оставшееся пространство в contentBody. Как мне этого добиться?

#div contentLeft{
  width:205px;
  float:left;
}

#div contentRight{
  width:<**100% - 205px**>;
  float:left;
}

Редактировать : Извините, я хотел написать «N%» вместо 100%, это должно работать для содержащей области любого процента или размера.

Answer 1

Следующие должны сделать это:

#contentBody{
  width:N%
}
#div contentLeft{
  width:205px;
  float:left;
}

#div contentRight{
  margin-left:205px;
}

Answer 2

самое простое, что нужно сделать, это расположить их оба абсолютно, затем установить значение contentleft на желаемое с помощью и добавить margin-left, равное той же ширине - следующим образом:

#div contentLeft{
  position:absolute;
  top:0;
  left:0;
  width:205px;
}

#div contentRight{
  position:absolute;
  width:100%;
  top:0;
  left:0;
  margin-left:205px;
}

Answer 3

Правильный способ - использовать CSS display: table в оболочке и display: table-cell в столбцах. Это сохраняет правильную семантику, но дает вам все преимущества таблиц, включая растяжение ячеек для заполнения оставшегося пространства.

Как обычно, IE не поддерживает это ценное свойство CSS, поэтому вы можете рассмотреть возможность использования реальной таблицы до тех пор, пока она не сделает это (или выполнить некоторые хаки с помощью JS или условных комментариев).

<style>
.table {display:table;}
.tr {display:table-row;}
.td {display:table-cell;}
</style>

<div class="table" style="width:100%">
  <div class="tr">
    <div class="td" style="width:205px"><!-- left --></div>
    <div class="td"><!-- right, stretch to fit --></div>
  </div>
</div>

<!--[if ie]>
<script>
// pseudocode, IE6 doesn't support document.getElementsByClassName()
// http://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/
for (node in getElementsByClassName('table')) {node.tagName = 'table';};
for (node in getElementsByClassName('tr')) {node.tagName = 'tr';};
for (node in getElementsByClassName('td')) {node.tagName = 'td';};
</script>
<![endif]-->

Answer 4

Вы можете поместить float влево и ширину только для contentLeft

.contentLeft{
    width:205px;
 float:left;
 border:1px solid red;

}

.contentRight{
    border:1px solid red;
}