I'm not very experienced with css and I encountered the following issue while trying to do a layout with fixed-width left and right columns, and a dynamic middle one. 

The only way I was able to accomplish this was using margins on the middle div, to avoid the overlapping with the side columns. I imagine that there's a cleaner way of achieving this, but I haven't been able to find a solution for it yet.

See jsfiddle here with margin left and no margin on the right: <http://jsfiddle.net/juansg_eng/BCJ6C/119/>

```
HTML
<div class="left">With margin</div>
<div class="right">No margin</div>
<div class="middle"></div>

css
.left { float: left; width: 134px; height: 191px; background-color:#0000ff; opacity: 0.5}
.middle { height: 50px; background-color: #ff0000; margin-left: 134px}
.right { float: right; width: 183px; height: 191px; background-color:#ffff00; opacity:0.5}

```

thanks!