Search code examples
csshtmlwidthliquid-layoutfixed-width

one liquid div with one fixed size div

I am trying to build a layout which has a fixed width div and a liquid width div beside it :

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

the left div is not filling its width, also i want this div to fill whole main div when right div is not present, how can i do it ?

Solution

  • I think what you want is more like

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