<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ min-width: 600px; } #content{ padding: 0 200px; overflow: hidden; } #header,#footer{ height: 20px; text-align: center; border: 1px solid deeppink; background: gray; } #content .middl,#content .left,#content .right{ padding-bottom: 10000px; margin-bottom: -10000px; } #content .middle{ float: left; width: 100%; background: pink; /*padding: 0 200px;*/ } #content .left{ position: relative; left: -200px; margin-left: -100%; float: left; width: 200px; background: yellow; } #content .right{ position: relative; right: -200px; margin-left: -200px; float: left; width: 200px; background: yellow; } .clearfix{ *zoom: 1; } .clearfix:after{ content: ""; display: block; clear: both; } </style> </head> <body> <div id="header">header</div> <div id="content" class="clearfix"> <div class="middle"> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> </div> <div class="left">left</div> <div class="right">right</div> </div> <div id="footer">footer</div> </body> </html>