Question

So when I set the input like this example the text box, because it has a border and padding by default, will be wider than 200px.

<div style="width:200px; background-color:red;">
    <input type="text" name="fname" style="width:100%;"/>
</div>

I know I can force the text box to fit within the 200px by setting a class to the input tag and tagging it with this CSS

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

Is there a better way to get this text box to size correctly, i.e. to fill 100% as I want it to do? I cannot use fixed sizes. I am using CSS themes so the text box padding, margins, etc are not known at compile time. They can be changed out by the user on the fly. So the solution must work regardless of what the text box’s padding, border, and margin is.

Answer 1

I think you have already answered your own question. box-sizing: border-box; is really the only CSS means of getting the element to fit inside its parent. css-tricks goes into great detail about this here.

http://css-tricks.com/box-sizing/

I am unaware of any other CSS you could use other than using javascript to perform some calculations and then modifying your input elements.