CSS固定和可变宽度的响应布局 - 最佳实践

Question

CSS和具有固定和可缩放元素的多列中的响应能力可以通过多种方式完成。

我已经创建了一个似乎有效的解决方案，但我不知道这是否是最佳实践。非常感谢Stack Overflow社区查看它并提供一些反馈。

小提琴： http://jsfiddle.net/brandrally/ZDt6N/

CSS

html, body { margin:0 auto; padding:0;  background: #fff; text-align: center; }

/* Clearfix
============================================================================ */
.CF { display:inline-block;overflow:hidden; }
/* IE mac \*/
.CF { display:block; }

/* Elements
============================================================================ */
div#container {max-width: 1140px;  min-width: 960px; margin:0 auto; margin-top: 10px; padding:0;  background:#0F9;  position:relative;}
    div#left-menu {width: 100px; background:#F30; position: absolute; top:0; left:0;   }
    div#information {padding: 10px 10px 25px 10px; background:#39C;  margin-left:100px;}
        div#information-wrapper {position:relative; background:#3FF; }
            div#information-left-menu {width: 125px;  background:#C30; position: absolute; top: 0; left:0;}
            div#content {background:#FC0; margin-left: 125px; text-align:left;}

HTML

<div id="container" class="CF" >

    <!-- This is fixed Width -->
    <div id="left-menu">
    <p>Left 100px wide </p>
    </div>

    <!-- Width scales to size of Container -->
    <div id="information" class="CF">
        <div id="information-wrapper">
            <div id="information-left-menu">Fixed width of 125px </div>
            <div id="content">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
        </div>  
    </div>

</div><!-- / END / Container / -->