2columns 1 fixed 1 fluid

2columns 1 fixed 1 fluid: using float and margin-left/right. and display:table/table-row/table-cell;

by Laurens Maneschijn

HTML

<code>
    .left{float:left;width:300px;}<br>
    .right{margin-left:300px;}<br>
</code>
<div id="d1">
    <div class="left" >Left  : 300px, 1st in DOM</div>
    <div class="right">Right : fluid, 2nd in DOM</div>
    <div class="clearfloat"></div>
</div>
<code>
    .left{margin-right:300px;}<br>
    .right{float:right;width:300px;}<br>
</code>
<b>(DOM order changed!)</b>
<div id="d2">
    <div class="right">Right : 300px, 1st in DOM</div>
    <div class="left" >Left  : fluid, 2nd in DOM</div>
    <div class="clearfloat"></div>
</div>
<code>
      display:table;width:100%;<br>
    > display:table-row;<br>
    > display:table-cell;width:300px;(or auto);<br>
</code>
<div id="d3">
    <div class="row">
        <div class="left" >Left  : fluid, 1st in DOM</div>
        <div class="right">Right : 300px, 2nd in DOM</div>
    </div>
</div>
<div id="d4">
    <div class="row">
        <div class="left" >Left  : fluid, 1st in DOM</div>
        <div class="right">Right : 300px, 2nd in DOM</div>
    </div>
</div>

CSS

.left {background-color:#88f;}
.right{background-color:#f88;}
#d1,#d2,#d3,#d4{background-color:#ff8;}
div:hover{outline:1px solid #f0f;opacity:0.5;}

#d1 .left {
	width: 300px;
	float: left;
}
#d1 .right {
	margin-left: 300px;
}
#d2 .left {
	margin-right: 300px;
}
#d2 .right {
	width: 300px;
	float: right;
}
#d3        {display:table;width:100%;}
#d3 .row   {display:table-row;}
#d3 .left  {display:table-cell;}
#d3 .right {display:table-cell;width:300px;}
#d4        {display:table;width:100%;}
#d4 .row   {display:table-row;}
#d4 .left  {display:table-cell;width:300px;}
#d4 .right {display:table-cell;}

/* default clear float classes: */
.clearfloat{
    clear:both;
    display:block;
    font-size:1px;
    font-size:0px;
    line-height:1px;
    line-height:0px;
    height:1px;
    height:0px;
    max-height:1px;
    max-height:0px;
    overflow:hidden;
    visibility:hidden;
}
.clearfloatafter:after{
    clear:both;
    display:table;
    content:"";
}