Seeking a solution to the CSS calc issue by turning to jQuery (since calc does not work on Explorer) - however, encountering an issue where setting the width minus pixels causes the columns to lose their elasticity and overlap on jsfiddle (although they appear fine when tested from textedit). It is important that the column left and middle remain fixed positioning, with only the right one scrolling down when content overflows.
Any suggestions?
Thank you in advance!
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');
});