<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> left and right</title>
<style>
.wrap{
margin:0 auto;
width:900px;
font-size:20px;
text-align:center;
}
#header{
height:100px;
background:pink;
}
#main{
height:500px;
background:yellow;
}
#footer{
height:80px;
background:green;}
#left{
width:200px;
height:100%;
float:left;
background:red;
}
#right{
width:700px;
height:100%;
float:left;
}
</style>
</head>
<body>
<header id="header" class="wrap">#header</header>
<section id="main" class="wrap">
<aside id="left" >#left</aside>
<div id="right">#right</div>
</section>
<footer id="footer" class="wrap">#footer</footer>
</body>
</html>
这里left 和right 在section 中间,所以闭合标签要在section里面。