How can I move the middle column to the left column?

http://jsfiddle.ne开发者_JS百科t/mnbayazit/zfBPQ/1/

Essentially I want

[ 33% of remaining space | 100px | 67% of remaining place ]

This is as close as I've been able to get so far...

I'm trying to avoid using JavaScript. Everything's easy with JS... but I really don't want to rely on it just for some positioning. Users aren't guaranteed to have it enabled.

You cannot do this with CSS alone. You need to use JavaScript to calculate remaining space. In the following example, middle div is 100px, left is 33% and right is 67% of remaining space. With Query you can do

function calc() {
    var ww = $(window).width();
    var rem = ww - $('.div2').width();
    $('.div1').css('width', rem * 0.33);
    $('.div3').css('width', rem * 0.67);
}
calc();
$(window).resize(calc);

Check working example at http://jsfiddle.net/HpJXk/

Hah! Solved it. And you guys said it couldn't be done!

http://jsfiddle.net/mnbayazit/zfBPQ/3/

I had to duplicate the 100px div, but there's no Javascript involved.