實現如下頁面佈局。核心區域左側自適應，右側固定寬度 200px
<!DOCTYPE HTML >
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;
padding:0}
#content {width:800px;margin: 10px auto}
#header {border:solid 1px green;height:70px;position: relative}
#logo {margin:10px ;float:left;border:solid 1px red;height:50px;width: 50px;}
#userinfo { position:absolute;border:1px solid #191919;right:10px;bottom:10px;width:140px;text-align:right}
.main {margin-top:10px;margin-bottom:10px}
aside {height:100px;border:1px solid red;width:200px;float: right}
#content2 {height:300px;border:1px solid blue;margin-right:208px;}
footer {border:1px solid #191919;margin-bottom:0;}
</style>
</head>
<body>
<div id="content">
<div id="header">
<div id="logo">LOGO</div>
<div id="userinfo">用戶名</div>
</div>
<div class="main">
<aside>aside 定寬200</aside>
<div id="content2">content自適應寬度</div>
</div>
<footer>
footer
</footer>
</div>
</body>
</html>方法二（摘）：
body {
margin: 0;
}
.fn-clear:after {
content: " ";
clear: both;
display: block;
font-size: 0;
visibility: hidden;
height: 0;
}
.fn-clear {
zoom: 1;
}
.container {
padding: 10px;
}
.header {
background: #eee;
position: relative;
margin-bottom: 10px;
}
.logo {
width: 100px;
height: 100px;
float: left;
background: #f60;
}
.username {
position: absolute;
right: 10px;
bottom: 10px;
}
.main {
margin-bottom: 10px;
}
.side-bar {
width: 200px;
float: right;
background: #ccc;
}
.content {
margin-right: 200px;
background: #f6f6f6;
}
.footer {
background: #999;
}<div class="container">
<div class="header fn-clear">
<div class="logo">logo</div>
<div
class="username">[email protected]</div>
</div>
<div class="main">
<div
class="side-bar">menu</div>
<div class="content">左側內容</div>
</div>
<div class="footer">
footer
</div>
</div>由於floar會導致父元素不能被撐開，所以用僞類（非IE）；IEhack 用zoom
詳見：clear