实现左边宽度固定，右边宽度自适应的两列布局

最近面试被问到一个问题，感觉还挺经典，但由于脑子短路回答的不是很好。面试过后，在此简单总结一下这个问题的答案，如果下次遇到可以能回答的好一点。

问题就是：实现一个两列布局，要求左边宽度固定，右边宽度自适应，利用CSS如何实现？

一些解决办法：

1.左侧浮动，右侧不设定宽度

浮动就使元素脱离标准文档流，所以会使两个元素在一行显示，但要注意右侧元素的左边缘是挨着父元素的左边缘的，而非是左侧元素的右边缘。所以可以为右侧元素设置margin-left，值为左侧元素的宽度，或者为右侧元素设置overflow:hidden

.left{
	float:left;
	width:200px;
	height:100px;
	background:#0FF;
}
.right{
        overflow:hidden;/*或者margin-left:200px*/
	height:100px;
	background:#CF0;
}

<div class="parent">
    <div class="left"></div>
    <div class="right"></div>
</div>

2.左侧使用绝对定位，右侧设定margin
左侧元素使用绝对定位，脱离标准文档流，但要注意和浮动相同的问题，左侧元素使用绝对定位，右侧元素的左边缘会挨着父元素的边缘，所以此时要为右侧元素设定margin-left，而这个值则为左侧元素的宽度。

.left{
	position:absolute;
	width:200px;
	height:100px;
	background:#0FF;
}
.right{
	margin-left:200px;
	height:100px;
	background:#CF0;
}

<div class="parent">
    <div class="left"></div>
    <div class="right"></div>
</div>

3.为父元素设置display:table和width，然后为左侧元素和右侧元素设置display:table-cell
但要注意IE7及以下版本不支持此方法

.parent{
	display:table;
	width:800px;
}
.left{
	display:table-cell;
	width:200px;
	height:100px;
	background:#0FF;
}
.right{
	display:table-cell;
	height:100px;
	background:#CF0;
}

<div class="parent">
    <div class="left"></div>
    <div class="right"></div>
</div>