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.