Div horizontal aligning, one fixed, one adaptive

Question

Hello everyone. I would like to create a vertical splitted site structure using two divs:

My intention is to have d2 next to d1 in a horizontal align structure (same line). What i get is not this. In fact using that code, d2 does not take the remaining space, but collapses to the min width.

if I use

WRONG because d2 goes down and takes all the space (but both divs are in different lines).

HOW TO REACH MY OBJECTIVE? Is there a design pattern for this problem????

Thanks.

Answer 1

OK THIS SHOULD BE THE RIGHT QUESTION...

Hello everyone. I would like to create a vertical splitted site structure using two divs:

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

My intention is to have d2 next to d1 in a horizontal align structure (same line). What i get is not this. In fact using that code, d2 does not take the remaining space, but collapses to the min width.

if I use

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

WRONG because d2 goes down and takes all the space (but both divs are in different lines).

HOW TO REACH MY OBJECTIVE? Is there a design pattern for this problem????

Thanks.

Answer 2

U might want to use a table like this:

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

Answer 3

CSS APPROACH:

<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>