Search code examples
cssborder-box

Still missing 2px in layout using box-sizing: border-box

Synopsis

I have a wrapper, width 980px with padding 10x. The content inside is 960px (border-box). I have one element, inline-block, width 760px, margin-right 20px, and another inline-block at 180px. These should match perfectly. But only subtracting two px from one of the elements will make them fit within the parent.

I am aware of the white-space problem with inline-blocks and always use that fix. Even so, I still tested two blocks with float and still the same problem.

CSS

* { padding: 0; margin: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }
.wrapper { width: 980px; margin: 0 auto 20px; padding: 10px; border: 1px solid #fff; box-shadow: 0 0 20px rgba(0,0,0,0.1); }
.featured_blog { width: 760px; height: 240px; padding: 10px; margin: 0 20px 20px 0; border: 1px solid #000; /*display: inline-block; *display: inline; zoom: 1;*/ display: block; float: left; vertical-align: top; overflow: hidden; text-overflow: ellipsis; }
.featured_author { width: 180px; height: 240px; border: 1px solid #000; /*display: inline-block; *display: inline; zoom: 1;*/ display: block; float: left; vertical-align: top; }

HTML

<section class="wrapper">
    <div class="featured_blog">
        <h2><span>Some Kind of Blog Title</span></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo orci, dictum id venenatis at, mattis nec enim. Maecenas vel molestie dolor. Maecenas mauris massa, congue at rhoncus et, dapibus sit amet eros. Nunc ipsum felis, eleifend in laoreet sit amet, tincidunt feugiat velit. Cras eu felis tortor, sed accumsan nisl. Ut volutpat viverra justo, quis consectetur felis tempor a. Etiam magna eros, euismod vel viverra in, facilisis sed libero. Vivamus in neque quis turpis adipiscing scelerisque dapibus at diam. Sed magna magna, ultrices quis posuere vel, pulvinar sodales dolor. Proin sapien sapien, adipiscing quis ultrices eget, cursus vitae enim. Maecenas ornare, erat non porta porta, sem felis condimentum erat, a lacinia nunc nisl a est.</p>
    </div><div class="featured_author"></div>
</section>

Where are these two px coming from???!!!!!

Solution

  • The 2px comes from the border: 1px solid #000;. Border on the either side causes this issue. Reduce 2px from the width.

    Without Border, it works fine http://jsfiddle.net/RRvMU/

    With Border, and a few width adjustments http://jsfiddle.net/RRvMU/1/