Question

Below is the link to the layout issue. Does anyone know why it shows up like that in IE and the fix for it? i.e. why does the textbox go beyond the outer div? It is fine in both Chrome & Firefox.

http://nothing123.s3.amazonaws.com/test-ie.htm

Here is the html.

<style>
  #loginBox {
    width: 336px;
    border: 1px solid red;
    padding: 5px;
  }
  #loginEmail {
    border: 1px solid blue;
    padding: 5px;
    width: 100%;
  }
</style>

<div id="loginBox">
  <input type="text" id="loginEmail"/>
</div>

Answer 1

It has everything to do with the box model.

The actual #loginBox actual width is equal to the width + paddings + border. Your loginBox is now 348px (336+(5×2)+(1×2)):

Now #loginEmail is set to 100% relative to it’s parent width, which would be 348px. Now add it’s padding and it’s border, it becomes 360px. Since the inner part of #loginBox is only 336px, naturally it bleeds out.

a quick remedy is to add box-sizing:border-box to #loginEmail so it won’t bleed out (so that it takes into account the border and padding in it’s 100%). However, this is only supported in IE8+.

For more info about this property and what browsers support it, check this page