div css 左侧固定，右侧自适应宽度 效果

html 写成 这样:

<div id = "header">head</div>
<div id = "wrapper"></div>
    <div id = "sidebar">固定宽度区</div>
    <div id = "content">自适应宽度区</div>
</div>
<div id = "footer">底部用来看有没有变形</div>

如果想把 中间 wrapper 部分 ，区分为 左侧 sidebar 固定宽度，右侧 content 部分 自适应宽度的话，

就要给  sidebar 设置宽度 比如  width:300px, 并且 float:left

问题是 content 如何在右侧自适应宽度呢 ? 菜鸡如我想了各种办法也搞不定。。参考了网上一些文章才知道。。

css 里 margin 后面是可以加方向的 。。比如 margin-left:310px ,即 左侧外边框的宽度是 310px ,而此时 其他3个方向 外边框没有宽度。

所以 css 要写成这样:

#content ,#sidebar {
	background-color: #eee;
}

#sidebar {
	float: left; width: 300px; height:240px;
}


#content {
	margin-left: 310px; height:340px;
}

这样一来，即可实现 左侧固定宽度，右侧自适应宽度的效果。