这里面我们要做的就是，当浏览器变化时，布局也同时跟着变化。
实现这一简单效果，代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#header,#content,#footer{
background-color:#ccc;
border:1px solid #00C;
height:50px;
80%;
margin:10px auto;
}
#content{
height:500px;
}
#left{
height:500px;
30%;
float:left;
background-color:#C90;
}
#right{
height:500px;
49.5%;
float:right;
border:solid 1px #060;
background-color:#c96;
}
#cont{
height:500px;
border:1px red solid;
20%;
float:left;
background-color:#960;
}
</style>
</head>
<body>
<div id="header"><h3>1-3-1(1)</h3></div>
<div id="content">
<div id="left">
<div id="varleft"></div>
</div>
<div id="cont"></div>
<div id="right">
sdksd skdfjksd sd dfdf dfdkfdf dsdfs sddfsfd sdfs sd sdksd skdfjksd sd dfdf dfdkfdf dsdfs sddfsfd sdfs sd sdksd skdfjksd sd dfdf dfdkfdf dsdfs sddfsfd sdfs sd sdksd skdfjksd sd dfdf dfdkfdf dsdfs sddfsfd sdfs sd sdksd skdfjksd sd dfdf dfdkfdf dsdfs
</div>
</div>
<div id="footer"></div>
</body>
</html>
主要是将原来的固定宽度，改变成为百分比。这样就可以实现浏览器变化窗口也随之变化了