<div class='header'>This is header</div> <div class="container_1"> <div class="right">right content fixed width.</div> <div class="left"> <div class="container_2"> <div class="left_2">left content fixed width.</div> <div class="right_2">flexible middle column.</div> <div class='clearfix'></div> </div> </div> <div class='clearfix'></div> </div> <div class='footer'>This is footer</div>
div { border:1px solid #000; } .header { padding: 1%; } .footer { padding: 1%; text-align: center; } .container_1 { height: auto; overflow: hidden; } .container_1 .right { width: 110px; float: right; background: #ddd; } .container_1 .left { width: auto; overflow: hidden; } .container_2 { height: auto; overflow: hidden; } .container_2 .left_2 { background: #B28262; float: left; width: 100px; } .container_2 .right_2 { background: none repeat scroll 0 0 #E8F6FE; overflow: hidden; width: auto; } .clearfix { clear:both; margin:0; padding:0; display:none; }