100% width is bigger than parent's div

I'm working on vBulletin theme, but on thread list, every thread has 100% for its width but threads are also bigger than their parents, but when i remove border of threads, they will fit parent's div:). so think this problem is on borders.

You can see that better on jsfiddle (thread is white shape with black border)

<body>
   <div class="after-body">
        <div class="body-wrapper">
             <div class="threadlist">
                    <ol class="threads">
                        <li class="threadbit"><div class="thread"></div></li>
                        <li class="threadbit"><div class="thread"></div></li>
                    </ol>
             </div>
        </div>
   </div>
</body>

The problem here is that the width is a size of the inner area with text, and the padding with border are "wrapped" around it. That specification makes no sense, but most modern browsers follow it.

Your savior is called box-sizing: border-box;.

.threadbit .thread {

    /* ... some stuff ... */

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

Look here: jsFiddle

More info on this property here and here.

Yep you are right, the borders are pushing out the "width" of the element. The is the default box-sizing of modern browsers. This can be modified in most with a declaration like:

.threadbit .thread { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

Note that it isn't supported below IE8 so depending what you are making and the support you want, you may need to find an alternative solution or design.

EDIT

It has been a while since my original answer and browser support has changed slightly. Firefox 29, Chrome 10, Safari 5.1 and Internet Explorer 8 onwards all support box-sizing unprefixed however there are a few known issues from particular versions.

The full/up-to-date list is available on caniuse.com however here is a few ones I found important from the site:

IE8: ignores box-sizing: border-box if min/max-width/height is used
IE8: the min-width property applies to content-box even if box-sizing is set to border-box
IE9: the width of the scrollbar is subtracted from the width of the element when set to position: absolute and either overflow: auto or overflow-y: scroll

As the market share for IE8 and IE9 decrease, these issues and the other listed on caniuse will be less of an issue in the future.

Always remember when you encounter problems related to width check dimensions of element through box model from firefox developer tool or from chrome's metrix box. Its alway a good idea to include

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

Also make sure to check display property. If a element is made display inline it won't take width, margin & padding values and if it is displayed as inline-block it take width, margin & padding.

Here is a link for box-sizing property http://www.paulirish.com/2012/box-sizing-border-box-ftw/

100% width is bigger than parent's div

Related

Recent Posts