<style type="text/css">
body{
box-sizing: border-box;
min-width: 1000px;
}
#head{
text-align: center;
background-color: #CCCCFF;
}
#container{
padding-left: 200px;
padding-right: 200px;
overflow: hidden;
}
#container .column{
float: left;
position: relative;
}
#center{
text-align: center;
background:#FFCC99;
padding: 10px 30px;
width: 100%;
min-height: 280px;
overflow: visible;
}
#left{
text-align: center;
width: 180px;
margin-left: -100%;
right: 260px; /*180+60(padding total)+30margin*/
background: #99CCCC;
padding: 0 10px;
min-height: 300px;
}
#right{
text-align: center;
width: 150px;
background-color: #FFCCCC;
margin-right: -300px;/*fullwidth+center column padding尽量大一点，chrome浏览器下 这个div浮动不起来*/
min-height: 300px;
}
#footer{
text-align: center;
background-color: #978f85;
clear: both;
margin-top: 0px;
}
h1{
margin:0px;
}
</style>
<div id="head"><h1>head</h1></div>
<div id="container">
<div id="center" class="column">center</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</div>
<div id="footer"><h1>foot</h1></div>
