<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>横向布局</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#wrap{background:#00c;width:800px;margin:0 auto;}
#header{background:red;width: 50%;}
#mainbody{background:#fc0;width: 50%; overflow: hidden;}
.left{width: 800px;height: 200px ;background:#fff;float: left;
margin-right: 20px;}
.right{width: 140px;height: 500px ;background:green;float: right;}
#footer{background:#639;width: 50%;}
</style>
</head>
<body>
<div id="wrap "></div>
<div id="header">头部</div>
<div id="mainbody">xcvxcv
<div class="left"></div>
<div class="right"></div>
</div>
<div id="footer">版权</div>
</body>
</html>