Горизонтальное выравнивание Div, одно фиксированное, одно адаптивное

Question

Я хотел бы создать структуру сайта с вертикальным разделением, используя два элемента div:

<div id="d1" style="width:100px;float:left"></div>
<div id="d2" style="width:auto;float:left"></div>

Мое намерение - иметь d2 рядом с d1 в горизонтальной структуре выравнивания (та же линия). То, что я получаю, не это. Фактически, используя этот код, d2 не занимает оставшееся пространство, а сворачивается до минимальной ширины.

если я использую

<div id="d1" style="width:100px;float:left"></div>
<div id="d2" style="width:100%;float:left"></div>

НЕПРАВИЛЬНО, потому что d2 понижается и занимает все пространство (но оба div в разных строках).

КАК ДОБРАТЬСЯ К МОЕЙ ЦЕЛИ? Есть шаблон проектирования для этой проблемы ????

Спасибо.

---

ОК, ЭТО ДОЛЖЕН БЫТЬ ПРАВИЛЬНЫМ ВОПРОСОМ ...

Привет всем. Я хотел бы создать структуру сайта с вертикальным разделением, используя два элемента div:

<div id="d1" style="width:100px;float:left"></div>
<div id="d2" style="width:auto;float:left"></div>

Мое намерение - иметь d2 рядом с d1 в горизонтальной структуре выравнивания (та же линия). То, что я получаю, не это. Фактически, используя этот код, d2 не занимает оставшееся пространство, а сворачивается до минимальной ширины.

если я использую

<div id="d1" style="width:100px;float:left"></div>
<div id="d2" style="width:100%;float:left"></div>

НЕПРАВИЛЬНО, потому что d2 понижается и занимает все пространство (но оба div в разных строках).

КАК ДОБРАТЬСЯ К МОЕЙ ЦЕЛИ? Есть шаблон проектирования для этой проблемы ????

Спасибо.

Answer 1

CSS ПОДХОД:

<div style="width:100%; position:relative">
<div style="width:100px;float:left"> </div>
<div style="width:100%;position:absolute;padding-left:100px;left:0;top:0"> </div>
</div>

Answer 2

U может захотеть использовать такую ​​таблицу:

<table width="100%" style="table-layout:fixed">
<tbody>
<tr>
<td width="100px"> </td>
<td width="100%"> </td>
</tr>
</tbody>
</table>