I've been struggling with this issue for hours and can't seem to figure out why the layout is not working as expected. I have a combination of fixed and fluid columns, box-sizing properties, borders, and a jQuery width setting in place. My goal is to have the left column be 170px in width, while the middle and right columns should each be 50% of the parent container's width minus the left column. However, the borders are overlapping and the middle and right columns do not have equal widths for some reason. Can anyone offer any assistance?
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;
});