如何实现div填充父容器的剩余宽度空间

很多朋友曾经碰到过这样的需求，有两个div，第一个固定宽度，第二个需要填满整个父容器的剩余宽度。如何实现？
下面讲解一个小技巧，但局限很多。

<style>
    .parent{
        width:100%;
    }
    /**
    *用于清除浮动造成的父容器不能被撑开
    */
    .parent:before,
    .parent:after {
        content: " ";
        display: table;
    }
    .parent:after {
        clear: both;
    }
    /***********************/
    /***********你必须保证left标签写在right的后面,否则需要设置left的z-index************/
    .left{
        display: block;
        width:200px;
        float: left;
    }
    .right{
        display: block;
        width:100%;
        padding-left:200px;
        float: left;
    }
</style>
<div class="parent">
    <div class="�left"></div>
    <div class="right"></div>
<div>

如上面所示，此外CSS3的width属性新加了一个东东，类似下面：
width:calc(100%-200px);把它直接加入到right，替换以上所有的style，这样也可以实现，但是这个属性值较新，兼容性看这里浏览器对CSS width:calc属性值的兼容