Sunil Prabakar Sunil Prabakar - 7 months ago 17
HTML Question

While adding bootstrap css file, div width automatically increased by 2 percent

I have added bootstrap.min.css file (v3.3.5) for enabling bootstrap layout in some pages. But in one of the pages I didn't use any bootstrap layout; I simply used one

div
with its children. I have dynamically set 100% width to the
div
. But while setting the width to 100% using jQuery's width method, the inline style of corresponding
div
element automatically changed to 102%. This issue happens only while I am enabling border for the particular
div
. Can you suggest to me how to overcome this issue? I will post my HTML code and jQuery method to set width.

HTML

<div id="parent" style="height:200px; border:1px solid black">
..............................
</div>


jQuery to change width dynamically

$("#parent").width('100%');


Restult Div

<div id="parent" style="height: 200px; border: 1px solid black; width: 102%;">


Note: This issue only occurs while the bootstrap.min.css file has been added and also when the particular
div
has the border.

Answer

This issue happens only while i am enabling border for the particular div.

You need the following in your CSS:

*, :before, :after {
    box-sizing: border-box;
}

Box-sizing, MDN:

border-box: The width and height properties include the padding and border, but not the margin.

VS.

content-box: This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin.