Internet Explorer Box Model Bug

Internet Explorer versions 5 and lower present block elements—having a specified width and/or height—with the padding and border dimensions included rather than added, as is the case with other browsers. For example, a div that is 100 pixels wide and has 15 pixels of padding will have a total width of 100 pixels. The padding will be included. Comparing to current W3C standards, which specify that the padding and border dimensions should be added to the width and height definitions, early versions Internet Explorer are said to have this wrong.

As Internet Explorer’s browser technology has improved with recent versions, this has become less of an issue. However, for backwards compatibly, versions 6 and 7 continue to display block elements (having padding and border definitions) incorrectly in Quirks mode.

Often, when doctype-related problems occur, the cause is not immediately apparent. Knowing the cause and workaround techniques can save you valuable development overhead.

If you are using divs, one simple workaround is to create a div with your margin definition, if applicable. Wrap this with another div containing your padding and border definitions.

If you are floating the outside div, you will also want to place your width definition on the inside div. The outside div width dimension will retract to the inside div width dimension, plus the padding.

If you are not floating the div, the width definition should be associated with the outside div. The inside div will naturally expand to the full width of the outside div, less the padding and border definitions.

It will appear as if the border and padding of a single div are being added to your width and height definitions—as it does with other browsers.

To see for yourself, you’ll need to view this page using Internet Explorer, versions 6 or 7. Each example is a page displaying in an iframe. The only thing different about each of these pages is the doctype declaration. Notice how the div on the right remains consistent.

In the example below, the box on the left is a single div containing height, width, and border definitions. The box on the right is composed of two divs—The inside div contains the width and height dimensions, while the outer div contains padding and border definitions.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
No document type

With the addition of the doctype tag, here is the code that was used to display the above boxes:

<head>
<title>IE Box Model Bug</title>
</head>
<body>

<style type='text/css'>
       div#first{
            width:75px;
            height:75px;
            border:1px solid black;
            padding:25px;
            float:left;
      }

      div#second_outer{
            /* padding and border properties */
           padding:25px;
           border:1px solid black;

           margin-left:15px;
           float:left;
      }

     div#second_inner{
           /* dimensions and margin */
          height:75px;
          width:75px;

          border:1px solid red;
      }
</style>

<div id='first'></div>

<div id='second_outer'>
<div id='second_inner'></div>
</div>

</body>
</html>