I'm been going over this for hours and can't work out why it's not working accurately.. I'm using a mix of fixed and fluid columns, width box-sizing and borders and a width set on Jquery. I want the left column to be 170px and the middle and right to be 50% minus the left column. But for some reason, the borders overlap and middle and right don't have the same width? Can anyone help me?
http://jsfiddle.net/Alga/9LGA9/7/
$('#middle').width(function () {
return ($(this).parent().width() * 0.5) - 85;
});
$('#right').width(function () {
return ($(this).parent().width() * 0.5) - 85;
});
Use
.outerWidth()
instead of.width()
. I also replaced 85 with$('#left').outerWidth() / 2
to make it more dynamic.http://jsfiddle.net/9LGA9/11/