If div elements are 100% of window height then your HTML+CSS markup is reduced to:
<div id="left">Liquid layout</div>
<div id="right">Fixed width 450px</div>
html { height: 100%; }
body { height: 100%; margin: 0; padding: 0; }
#left { position: absolute; top: 0; bottom: 0; left: 0; right: 450px; }
#right { position: absolute; top: 0; bottom: 0; right: 0; width: 450px; }
Demo here
If div elements are equal height then here is an "old school" approach that (i) Preserves source order (ii) Uses floats (iii) Produces equal height faux columns (iv) Requires one clearing div
<div id="parent">
<div id="left">Liquid layout</div>
<div id="right">Fixed width 450px</div>
<div class="clear"></div>
</div>
#parent { border-right: 450px solid orange /* right bg */; background-color: yellow /* left bg */; }
#left { float: left; width: 100%; }
#right { float: right; width: 450px; margin-right: -450px; }
.clear { clear: both; }
Demo here
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…