<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清新教育</title>
<style type="text/css">
*{margin:0;padding:0;}
.clearfix:after{content:""; clear: both;
display: block;}
.clearfix{*zoom: 1;}
#wrapper{border: #000 solid 3px;
width: 500px;}
#header{height: 70px;
background: #f90;}
#main{/* border:#f0f solid 2px; */
margin: 10px 0;}
.content{width: 340px;
height: 200px;
background: #f90;
float: left;}
.sidebar{width: 150px;
height: 200px;
background: #f90;
float: right;}
#footer{height: 50px;
background: #f90;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">hedaer</div>
<div id="main" class="clearfix">
<div class="content">content</div>
<div class="sidebar">sidebar</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>