<style type="text/css">
body {
min-width: 550px;
}
#main {
width: 100%;
height: 200px;
background-color: #ccc;
}
#main-wrap {
margin-left: 190px;
margin-right: 190px;
}
#left {
background-color: yellow;
width: 190px;
height: 200px;
margin-left: -100%;
}
#right {
background-color: yellowgreen;
width: 190px;
height: 200px;
margin-left: -190px;
}
.col {
float: left;
}
#header {
text-align: center;
background-color: #f1f1f1;
height: 30px;
}
#footer {
/* clear: both; */
text-align: center;
background-color: #f1f1f1;
height: 30px;
}
</style>
<div id="header">header</div>
<div id="main" class="col">
<div id="main-wrap">main</div>
</div>
<div id="left" class="col">left</div>
<div id="right" class="col">right</div>
<div id="footer">footer</div>
双飞翼布局效果如下图: