左侧固定宽度,右侧自适应宽度的CSS布局

作者:佚名     字体:[增加 减小]    类型:转载
这个是我练习做网页查资料查到的,有很多不错的布局。将其总结,并写上自己使用的一些感悟。
第一种方法: 关于这个布局,作者是这样说明的:“left和right都贴住左侧。设置left在right上面(z-index);在right内加个放内容的层(content);设置content距离right的左侧为200px,即刚巧等于left的宽度。” 这个布局有一个缺点就是,如果我设置了foot的div,试了很多办法,都不能根据content的高度,连着中间的内容,自动置于HTML页面的底部。如有牛人知道解决方法,望留言解答。
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title></title> 
<style type="text/css"> 
* {margin:0; padding:0; list-style:none; } 
.header{ width:100%;height:250px;background-color:#33FF00;} 
.logo{width:100%;height:200px;background-color:#330000;} 
.nav{width:100%;height:50px;background-color:#660000;} 
.wrapper {width: 100%; } 
.left {width:200px; height:auto;background:#fcc; position:absolute; left:0;z-index:1;} 
.right {width:100%; height:400px;background:#ccc; position:absolute; left:0;} 
.content {height:400px;margin-left:200px; background:#ffc; } 
.foot { position:absolute;height:100px;background-color:#000000;bottom:0;} 
.foot h1, .foot p{color:#FFFFFF;} 
</style> 
</head> 
<body> 
<div class="wrapper"> 
<div class="header"> 
<div class="logo"></div> 
<div class="nav"></div> 
</div> 
<div class="left"> 
<h1>Left</h1> 
<p>左侧固定宽度200px</p> 
</div> 
<div class="right"> 
<div class="content"> 
<h1>Content</h1> 
<p>右侧宽度自动适应</p> 
</div> 
</div> 
<div class="foot"> 
<h1>Foot</h1> 
<p>想看看他的位置会在哪?</p> 
</div> 
</div> 
</body> 
</html>