How to avoid the IE box model bug

August 3rd, 2008

How to avoid the IE box model bug

0 comments

CSS One of the common bugs of IE is the box model bug which affects the box model of any HTML block-level element when the page is in quirks mode. In brief, IE includes the padding when calculating the width of the block. Personally, I found this very logical and don't like to consider it a bug. But since it violates the W3C standards, it is a bug.

One simple approach to avoid this bug is to avoid specifying both width and padding or border for an element. How?

Say you have a sidebar block for which you need to specify a width, a border and a padding.

<style type="text/css">
  #sidebar {
    background-color: #CCCCCC;
    padding: 5px;
    width: 183px;
    border: 1px solid #000000;
  }
</style>
<div id="sidebar">
  Content for sidebar goes here.
</div>

Here is the result in Firefox and IE:

Box Model

To avoid the bug, you can simply add a child block to the sidebar. Then, specify the width for the sidebar and specify the border and padding for the child block.

<style type="text/css">
  #sidebar {
    background-color: #CCCCCC;
    width: 183px;
  }
  #sidebar_content {
    padding: 5px;
    border: 1px solid #000000;
  }
</style>
<div id="sidebar">
  <div id="sidebar_content">
    Content for sidebar goes here.
  </div>
</div>

Now, you get the same results for both Firefox and IE with exactly the same width you specified in your CSS code.