任鸟飞网站设计博客

页面布局元素的宽度可自行调整以适应浏览器宽度或父元素的宽度。

具体示例预览

原理：利用margin属性，约束局部元素定位。

HTML：

<div id="page">
  <div id="right">
    right
  </div>
 <div id="left">
   Left
 </div>
</div>

CSS:

#page {
	background-color: #FF0000;
	min-height:300px;
}
#page #right {
	width: 300px;
	background-color: #0000FF;
	float: right;
	height: 200px;
}
#page #left {
	background-color: #FFFF00;
	margin-right: 350px;
	height: 200px;
}

代码说明：由于 #right设置float:left;所以需要根据实际情况给#page增加min-height属性，以防止#right的高度超过#page，造成#right溢出。也就是说尽量要保证#page的高度大于#right的高度。