CSS三列布局两端固定宽度中间自适应

<div class="wrap"> 
<div class="main"> 
<div class="content"></div> 
</div> 
<div class="submain">2</div> 
<div class="sidebar">3</div> 
</div>

.wrap{width: 500px;border: 1px solid;overflow: hidden;} 
.main{float: left;width: 100%;} 
.content{height: 50px;margin: 0 150px;background-color: #f60;} 
.submain{float: left;width: 150px;height: 50px;margin-left: -100%;background-color: #6f0;} 
.sidebar{float: left;width: 150px;height: 50px;margin-left: -150px;background-color: #06f;}