<input> width: 100% looks bad

[Emperor]

Hi guys,

This never comes out right:

<input style="width: 100%;" ...>

...same with a <textarea>

I tried it in <div>s and also <td>s, it's always too wide and the right side gets cut off.

Any ideas?

[bedlam]

Hi,

All these elements have borders by default and may also have padding and/or margins. This means that if you set the width to 100%, the effective size of the element as a whole will be greater than 100% (look into the w3c box model for more info [google.com]). You'd probably be ok with 95% or so in most cases (unless th 2 or 4 px of border on the element constitutes more than 5% of the total width of the container...)

-B

[edited by: bedlam at 2:37 am (utc) on July 14, 2005]

[Emperor]

Hi,

It's because I was adding padding to it. If I take the padding out it's fine, but I like some padding inside; I tried a negative margin to compensate but it didn't work.

[wasproject]

Hi Emperor.

Try

 left:0; right:0; 

instead of

 width: 100%; 

Regards