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

在具有固定和可伸缩元素的多列中使用CSS和响应可以通过多种方式实现

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

小提琴：

CSS

HTML

---

CodeReview.stackexchange.com-这里的主题无关，谢谢Ramon，我不知道CodeReview的存在。非常感谢。

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;}

<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 / -->