CSS clipping end of input window

Question

For heaven's sake! Why is the input window disabled on the right? I looked at the padding and fields in chrome and I can't figure out what causes it. I am new to this, but it remains a mystery.

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

Answer 1

Because it is 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 set the label to float, which means that the next div will get the width of the whole wrapper. This will move it to the right of the label with the equal parent character of both tags. You need to set a fixed width for .fieldwrapper .

Answer 3

You enter longer than your parent whose overflow is set to hidden.

Answer 4

Change .fieldwrapper to { overflow: auto;} and you will see that the input is full, that div.

Answer 5

Try reducing width:100% to width:96% in the .field class, then the problem will be solved.