Html – CSS Contain input text to 100% width

csshtml

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.

Best Answer

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.

Related Solutions

Html – How to make a TextArea 100% width without overflowing when padding is present in CSS

Why not forget the hacks and just do it with CSS?

One I use frequently:

.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

See browser support here.

Html – Set cellpadding and cellspacing in CSS

Basics

For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":

td { 
    padding: 10px;
}

For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".

Issues in IE ≤ 7

This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say "almost" because these browsers still support the border-collapse property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.

Best Answer

Related Solutions

Html – How to make a TextArea 100% width without overflowing when padding is present in CSS

Html – Set cellpadding and cellspacing in CSS

Related Topic