Issue with "width" while applying through jQuery

Question

I have a container DIV which has 7(this is variable number)DIVs aligned as 7 columns. Since the number of columns are varying, I would like to take the column count and using a jquery calculation(100/column count) and apply this width to each column.For each column separation, I have applied 2px border right for columns except for the last column.I have also applied border-box sizing to avoid the conflicts between percentage width and pixel width border.

My issue is when apply column width through jquery width,

var count = $('.col').length;
$('.col').width(100/count+'%');

it seems for the first 6 columns it is applying a width of '16.2857%' and for the last column it is '14.2857%'. Actually 14.2857 is the right value to be applied. The border and box-sizing properties affect it.

But on the same time, if you change jquery width to css it works perfectly fine.

var count = $('.col').length;
$('.col').css('width',100/count+'%');

Any body know why is this happening?

below is my working sample

$(window).ready(function(){

  //This make the width Issue
  var count = $('.col').length;
  $('.col').width(100/count+'%');
  
  //But This works perfectly fine
  //var count = $('.col').length;
  //$('.col').css('width',100/count+'%');
});

.container{
  width: 210px;
  height:120px;
  float: left;
  border: solid 2px red;
}
.col{
  height: 100%;
  float:left;
  background:green;
  border-right: solid 2px yellow;
  box-sizing: border-box;
}
.col:last-child{
  border-right: none;
}

user_2668119 · Answer

It looks like this has something to do with this line from the jQuery docs

Note that .width() will always return the content width, regardless of the value of the CSS box-sizing property. As of jQuery 1.8, this may require retrieving the CSS width plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box. To avoid this penalty, use .css( "width" ) rather than .width()

https://api.jquery.com/width/

user_7461381 · Answer

.width()

Note that .width() will always return the content width, regardless of the value of the CSS box-sizing property. As of jQuery 1.8, this may require retrieving the CSS width plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box. To avoid this penalty, use .css( "width" ) rather than .width().

Though the preferred way is with .css(), you can still get the expected result by using outerWidth() instead of width():

$(window).ready(function(){

  //This make the width Issue
  var count = $('.col').length;
  $('.col').outerWidth(100/count+'%');
  //But This works perfectly fine
  //var count = $('.col').length;
  //$('.col').css('width',100/count+'%');
});

.container{
  width: 210px;
  height:120px;
  float: left;
  border: solid 2px red;
}
.col{
  height: 100%;
  float:left;
  background:green;
  border-right: solid 2px yellow;
  box-sizing: border-box;
}
.col:last-child{
  border-right: none;
}

Issue with "width" while applying through jQuery

2 Answers