Jquery calc percentage width minus pixels not returning elastic column

Question

I'm trying to bypass the css calc issue by using jquery (since calc won't work on Explorer) but when I set the width minus pixels the columns are not elastic anymore and everything overlaps on jsfiddle (fine when I test it from textedit) Please note I need to have column left and middle as fixed positioning so that only the right one scrolls down when the content overflows.

Any ideas?

Many Thanks!

http://jsfiddle.net/Alga/PHv6S/

CSS:

html, body { width:100%; margin:0; padding:0; font-size:87.5%; }

.middle {
    position:fixed;
    margin-top:20;
    margin-left:170;
    background:yellow;
    margin-bottom:20px;
    margin-right:40px;
}

.left {
    position:fixed;
    top:20px;
    left:20px;
    background:blue;
    width:130px;
}

.right {
    float:right;
    background:blue;
    margin: 20px 20px 20px 0;
}

HTML:

<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>

JavaScript:

$(document).ready(function () { /* standard jQuery document ready */
    $('.left').css('height', '100%').css('height', '-=40px');
    $('.middle').css('width', '40%').css('width', '-=20px');
    $('.middle').css('height', '100%').css('height', '-=40px');
    $('.right').css('width', '60%').css('width', '-=190px');
    $('.right').css('height', '100%').css('height', '-=40px');
}); 

Kreager

Answer 1

Try this:

http://jsfiddle.net/PHv6S/3/

$('.middle').css('width', '100%').css('width', '-=260px');

$(window).on('resize', function(){
    $('.middle').css('width', '100%').css('width', '-=260px');
});

Glary

awesome. was thought about something like that. – Nephralgia