Two column div layout with fluid left and fixed right column

Question

I want to make a two column layout using DIVs, where right column will have a fixed width of 200px and the left one would take all the space that is left.

It's quite easy, if you use tables:

<table width="100%">   <tr>     <td>Column 1</td>     <td width="200">Column 2 (always 200px)</td>   </tr> </table> 

But how about DIVs? Is it possible to accomplish this? If yes, then how?

Answer 1

The following examples are source ordered i.e. column 1 appears before column 2 in the HTML source. Whether a column appears on left or right is controlled by CSS:

Fixed Right

#wrapper {    margin-right: 200px;  }  #content {    float: left;    width: 100%;    background-color: #CCF;  }  #sidebar {    float: right;    width: 200px;    margin-right: -200px;    background-color: #FFA;  }  #cleared {    clear: both;  }

<div id="wrapper">    <div id="content">Column 1 (fluid)</div>    <div id="sidebar">Column 2 (fixed)</div>    <div id="cleared"></div>  </div>

Fixed Left

#wrapper {    margin-left: 200px;  }  #content {    float: right;    width: 100%;    background-color: #CCF;  }  #sidebar {    float: left;    width: 200px;    margin-left: -200px;    background-color: #FFA;  }  #cleared {    clear: both;  }

<div id="wrapper">    <div id="content">Column 1 (fluid)</div>    <div id="sidebar">Column 2 (fixed)</div>    <div id="cleared"></div>  </div>

Alternate solution is to use display: table-cell; which results in equal height columns.