<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>一边固定宽度和另外一边自适应宽度的布局</title><style type="text/css"> body { padding: 0; margin: 0; } #wrapper { width: 960px; border: 1px solid #333; margin: 0 auto; } #nav { width: 200px; float: right; } #content-wrapper { margin-right: -200px; float: left; width: 100%; } #content { margin-right: 200px; padding: 0 10px; } .clearfix:after { height: 0; content: "."; display: block; clear: both; visibility: hidden; }</style></head><body> <div id="wrapper" class="clearfix"> <div id="content-wrapper"> <div id="content"> <p> 中新网1月12日电(记者贾靖峰)中国银监会有关负责人12日表示，将在风险可控、商业可持续前提下支持保障性住房建设，他并透露，2010年11月末经济适用房开发贷款同比劲增逾三成，经济适用房个人购房贷款则年劲增逾四成，但保障性住房贷款仍存在“风险缓释不足、还款保障难以落实”等问题。 </p> </div> </div> <div id="nav"> <p>菜单1</p> <p>菜单2</p> <p>菜单3</p> <p>菜单4</p> </div> </div></body></html>其原理是左右两个浮动DIV,左边DIV已知宽度，右边DIV宽度设置为100%，右块会跑到左块的下面，可以给右块设置负左边距，负左边距绝对值等于左块宽度，这时左右两个DIV就可以处于同一水平线了。为了给左块空出内容展示空间，右块内嵌一个DIV，内嵌DIV设置左边距为左快宽度，如此，就可以实现左边DIV固定宽度，右边DIV自适应宽度。
