CSS 3 column layout issues

I'm having a few troubles with a 3 column layout I'm currently working on. I can create the layout just fine but there are some niggling issues I need to iron out.

HTML

<div id="container">
    <div class="col1">
    </div>
    <div class="col2">
    </div>
    <div class="col3">
    </div>
</div>

CSS

.col1
{
  float: left;
}
.col2
{
  float: left;
}
.col3
{
  float: right;
}
.col1,
.col3
{
  width: 100px;
}

My first issue is that columns 1 and 3 are fixed width and I need the middle column to expand to fill the gap between the two of them. I can't for the life of me figure out how to do this. I can achieve this using absolute positioning but that leads me nicely onto my next problem...

When the browser is resized I need the columns开发者_如何学Python to wrap nicely underneath each other.

Any help or pointers would be much appreciated. Ideally I'd like to get this done with as little hacking and javascript as possible.

Here's a fiddle I've started to play around with: http://jsfiddle.net/BCJ6C/6/

Cheers!

Here is your fiddle, updated

Just do not float the middle column. The bad part is that that you have to move it below column 1 and column 3 in the source order. Hope this is not a problem.

I think this is what youre looking for: http://matthewjamestaylor.com/blog/holy-grail-liquid-layout-no-quirks-mode

Edit: Changed the url. Accidentally posted the older version of this first