css: Problem with width and padding in IE

Question

I'm having a problem with widths on input[text] fields in IE, all versions.

I have a div with an explicitly set width of 250px. In this div, I have an input text field with width set to 100%. This input also has an internal left-padding of 10px.

In IE, it renders the width as 100% + 10px. I cannot figure out a technique for constraining the width to the container.

This problem initially occurred in all browsers, but was very easy to fix in FF, Safari and Chrome by adding max-width:100%. IE6/7 don't support this, while IE8 does but it also still adds the padding to the width.

I understand that IE's box model includes border and margin in its width calculations, so with that given as understood I still can't figure a way around this.

I'm also trying to find a better solution than just setting my input widths to 240px with the padding, because there are various inputs in this form who's containers vary in size and I'd like to find a universal solution.

Here's some code:

<div class="places_edit_left">
 <h4>PHONE <strong>(NOT USER EDITABLE)</strong></h4>
 <input type="text" value="" name="phoneNumber"/>

 <h4>ADDRESS<strong>(NOT USER EDITABLE)</strong></h4>
 <input type="text" value="" name="address"/>
</div>

CSS

.places_edit_left{ width:250px; }
.places_edit_left input{ width:100%; max-width:100%; padding-left:10px;}

Answer 1

1. The wrong box model applies to IE in quirks mode. Therefore, you may need to trigger strict mode. See e.g. http://www.quirksmode.org/css/quirksmode.html

2. You want to make the input as wide as the container? Set width explicitely (250px - 10px for padding - XXpx for borders). You want the input to not be wider than the div? Set overflow for div to hidden.

Answer 2

Not counting the max-width issue, IE is doing the right thing here. The CSS box model says that an element's overall size is the width PLUS its padding, PLUS its margins.

The box model also says that for any non-floating block level element, the entire size of the element (including everything) is always 100% of the containing element. You can use this to your advantage by setting the width of your input box to be "auto", and then setting your paddings, border, and margins explicitly.

Here's a little example (I know this is a lot of markup, but this is a bit of overkill to illustrate the point),

.places_edit_left{ 
  width:250px; 
  overflow:auto;
}

.places_edit_left input {
  padding-right:0px;
  padding-left:10px;  
  margin: 0 0 0 0;
  border:1px solid black;
  width:auto;
  display:block;
  float:none;
}