CSS cutting off the end of the input box

Question

For goodness sake!! Why is my input box being cut off on the right? I've looked into the padding and margins in chrome and I cant see whats causing it. I am new to this, but it remains a mystery.

http://jsfiddle.net/GCt3z/1/

Answer 1

Because it's 100% + 10px (padding) + 2px (border) wide. Try using:

-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
        box-sizing: border-box;

See the updated Fiddle > http://jsfiddle.net/GCt3z/2/

Answer 2

.fieldwrapper has overflow: hidden. You are setting label as float, which means that the next div will get width of the entire wrapper. This will move it to the right of the label with with equal to the parent of the both tags. You need to set fixed width for .fieldwrapper.