Question

I have some divs all set to width:100% on my website:

<div id="participate" class="test">
  participate
</div>

<div id="description" class="test">

  <div id="brief" style="display:table-cell">
&nbsp;
  </div>

  <div id="price" style="display:table-cell">
&nbsp;
  </div>

</div>

<div id="bottom" class="test">

  <div id="partners" class="test">
&nbsp;
  </div>

  <div id="content" class="test">
&nbsp;
  </div>

</div>

Only #bottom has set display:table. When I set border I see #border is smaller excatly 2px than others div.

When I set #border width:100.3% it is ok however this solution seems retarted to me. The problem is present in chromium and absent in firefox.

Why is that and how can I get rid of it?

Any hint’ll be appreciated.

Answer 1

https://developer.mozilla.org/en/CSS/box-sizing

div elements default to box-sizing: content-box, in which borders are not part of the width.

In Chrome, setting display: table forces box-sizing: border-box, in which the borders are part of the width.

This is shown here: http://jsfiddle.net/thirtydot/wsEkc/

The easiest way to make the two divs consistent is to apply box-sizing: border-box (and its vendor prefixed variants).

See: http://jsfiddle.net/wsEkc/3/