CSS: input field and select option bugs?

Question

Why input fields always 'over-run' the div that contain them when I set them to 100%?

css,

.item-form {
    margin:0px 0px 10px 0px;
    clear:both;
    border:1px solid #999966;
} 

.item-form  input,  
.item-form textarea,
    {
    background-color:#ffffff;
    border: 1px solid #dddddd; 
    width:100%;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    padding:2px 2px 2px 2px;
}

html,

<div class="item-form">
    <input name="username" type="text" id="username" value="" title="USER NAME"/>
</div>

output,

How can I fix it??

Thanks.

EDIT:

I seem to have fixed the input fields issue, but then I came across another problem - select field,

.item-form {
    margin:0px 0px 10px 0px;
    padding:0px 6px 0px 0px; /** important **/
    clear:both;
    }

.item-form select{
    border: 1px solid #dddddd; 
    width:100%; /** a bug to fix **/
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    padding:2px 2px 2px 2px;
    color:#999;
    }

Now the select fields are 'under-run'!!

How do I fix this??

Thanks.

Answer 1

It is giving the inputs 100% width, then adding the 2px padding and 1px border to each side. The result is an input that is 6px too wide.

To fix, you need to restrict the width available to inputs by adding padding to the parent element. In this case, add 6px right padding to .item-form:

.item-form {
    padding-right: 6px;
} 

.item-form input,  
.item-form textarea {
    width: 100%;
    padding: 2px;
}

Selects are the odd ones out, as they don't follow the rules above (100% width includes the padding) - therefore you don't want to restrict their parent's width. So the trick is to only put wrapper elements with padding around inputs and textareas, but not around selects.

See this example for pixel-perfect alignment.

Answer 2

Use outline instead of border. border affects the layout in that it makes room for the border. outline simply strokes (or outlines) the edges and no positioning changes. It is two pixels over because you have two one-pixel borders on either side which cause it to appear two pixels over.