html css实现左右两列固定宽度中间自适应效果

实现有很多方法 浮动，固定定位，和css布局，这篇文章通过浮动和display:table-sell 两种方法来实现。

1.float和margin
css部分：

.main{overflow:hidden;min-width:405px;}
.left,.right,.center { color: #fff;word-wrap: break-word;min-height:500px;}
.left {background-color: #00acac;width: 200px;float: left; }
.right {background-color: #0000ff;width: 200px;float: right;}
.center {background-color: #000000;margin:0 200px;}

html部分

<div class="main">
    <div class="left">
        <div>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字div>
        <p>ssssssssssssssssssssssssssssssssssssssssss1111111111111111111111111div>
    <div class="right"> <div>ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssdiv>
        <p>sssssssssssssssssssssssssssssssssssssssssp>
        1111111111111111111111222222222222222222div>
    <div class="center"> <div>sssssssssssssssssssssssssssdiv>
        <p>sssssssssssssssssssssssssssssssssssssssssssssssssssssssp>
        1111111111111111字文字文字文字文字div>
div>

2.display:table-cell 这种实现更简单 只是不支持ie7 ie6

css部分

.main {display: table;min-width: 320px;width: 100%; }
.left{width: 200px;display: table-cell;background-color:#00acac; }

html部分

<div class="main">
    <div class="left">然后发现都对对方一见钟情后然后发现都对对方一见钟情后然后发现都对对方一见钟情后div>
    <div>
        ，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。
    div>
    <div class="left">有一天他们相遇了有一天他们相遇了有一天他们相遇了有一天他们相遇了div>
div>