Css box-sizing and jquery width not working properly

Question

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;
     });

Answer 1

Use .outerWidth() instead of .width(). I also replaced 85 with $('#left').outerWidth() / 2 to make it more dynamic.

http://jsfiddle.net/9LGA9/11/

 function elasticCol() {
 $('#middle').outerWidth(function () {
     return ($(this).parent().width() * 0.5) - $('#left').outerWidth() / 2;
 });

 $('#right').outerWidth(function () {
     return ($(this).parent().width() * 0.5) - $('#left').outerWidth() / 2;
 });

 }
 elasticCol();

 $(window).on('resize', function () {
     elasticCol();
 });