灵活的两列布局

方案1

<style type="text/css">
     #main {min-width:60px;min-height:600px; background:#FEFF0A;padding-left:300px;}
     #main-left {margin-left:-300px;width:300px;min-height:400px;background:#98FF1A;}
     #main-right {min-height:400px;background:#7CC0FF;}
     .float {float:left;}
     .clear{clear:both: height : 0; line-height:0; font-size:0;}
</style>
<div id="main">
     <div id="main-left"  class="float">
            这个是左边部分，宽度确定
     </div>
     <div id="main-right">
            这个是右边部分，宽度自动扩展
     </div>
     <div class="clear"></div>
</div>

父元素padding-left:300px;则浮动元素后，每行给子元素的宽度为 父元素宽度-300px;
这时让左侧元素宽度为300px,并且设置外面距为-300px,则左侧块的左边距与父元素左边距重合了。
右侧元素宽度百分之百自适应父元素宽度。

方案2

样式

#mainContent {
    min-height: 200px;
    padding: 0px 0px 10px 0;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    float: left;
    margin-left: -22em;
    width: 100%;
}

#mainContent .forFlow {
    margin-left: 22em;
    float: none;
    width: auto;
}

#sideBar {
    width: 230px;
    min-height: 200px;
    padding: 0px 0 0px 20px;
    float: left;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}

HTML代码

<div id="mainContent">
    <div class="forFlow">
    </div>
    <div id="sideBar">
    </div>
</div>

注意margin-left:-22em;

方案3

圣杯和双飞翼布局
https://github.com/rccoder/blog/issues/6

<div class="head">head</div>
    <div class="content">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
<div class="foot">foot</div>

圣杯主要思想

.left, .right, .main {
    float: left;
}
.left {
    width: 40px;
    height: 60px;
    background-color: #B9E078;
    margin-left: -100%;
}
.right {
    width: 60px;
    height: 80px;
    background-color: #FF9900;
    margin-left: -60px;
}
.main {
    background-color: crimson;
    width: 100%;
}
.content {
    padding: 0 60px 0 40px;
}

关键点1：

main, left, right 我们都可以看做是在一个浮动流中，依次的顺序也是 main left right。目前是因为 main 占了100% 从而导致 left 与 right 不能和 main 浮在同一行了，这个时候我们可以利用负边距来让 left 向前移动 （即 margin-left 为正的时候就是和左边的盒子的外边距，那么为负的时候就是像前移动了）。

关键点2：

给content一个内边距，这样就不会出现left和main，以及right和main的重叠了

双飞翼布局主要思想

<div class="head">head</div>
    <div class="content cleanfix">
        <div class="main">
            <div class="wrap">main</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
<div class="foot">foot</div>

双飞翼布局和圣杯布局很像，区别是在 main 里面再添加一个 div, 然后对这个 div 进行 margin-left 和 margin-right，而不是给conten一个padding。

.wrap {
    background-color: darkmagenta;
    margin-left: 40px;
    margin-right: 60px;
}