布局:两列
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#leftcont,#rightcont{margin:10px 0;border:1px solid #ccc;}
#maincont{margin-bottom:20px;}
#header{height:100px;background:#0cf;}
#maincont,#leftcont,#rightcont{height:400px;}
#leftcont{width:20%;float:left;}
#rightcont{width:79%;float:right;}
#footer{padding:20px 0 10px;background:#f90;font-size:12px;text-align:center;color:#fff;}
#footer a{color:#fff;}
.userinfo{margin:5px 0;background:#f50;border:1px solid #000;}
</style>
</head>
<body>
<div id="header"></div>
<div id="maincont">
<div id="rightcont">主要内容在这里</div>
<div id="leftcont">
<div class="userinfo">234</div>
<div class="userinfo"></div>
<div class="userinfo"></div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
三列
<style>
#header{height:100px;}
#leftcont,#midcont,#rightcont{border:1px solid #ccc;height:100px;}
#leftcont{width:69%;float:left;}
#lcont{width:39%;background:#555;float:left;}
#rcont{width:59%;background:#985;float:right;}
#rightcont{width:30%;float:right;}
</style>
</head>
<body>
<div id="header"></div>
<div id="maincont">
<div id="leftcont">
<div id="lcont"></div>
<div id="rcont"></div>
</div>
<div id="rightcont"></div>
</div>
<div id="footer"></div>
</body>
</html>

















