How to style CSS for input box's width as a percentage when it has border and padding?

Tags: html,css,forms

Problem :

If the container is 500px wide, and the label is 30% wide, and the input box is 70% wide, then supposedly everything should fit, but the catch is that the input box has a border left and right for 4px, and padding left and right for 2px, making it 6px wider than it is.

We can hack it by making the width not 70%, but 68% or something, but this is somewhat hacky. Is there a way to handle it? (We cannot do CSS reset, because the input box does need a border usually, assuming we don't hack it by using outline, which doesn't occupy any space).

The CSS:

#my-container { width: 500px }
#first-name-label { display: inline-block; width: 30% }
#first-name { display: inline-block; width: 70% }

The following are some examples:

  1. outWidth: 356 (for the input box, as shown in debug console)
  2. outerWidth 351
  3. outerWidth 349
  4. outerWidth 349
  5. won’t wrap, but input box will go beyond the width of container

Solution :

The reason that the width's are not accurate is because they are set to box-sizing:content-box;, which is the default setting for box-sizing. When the width and height are calculated in CSS, the border and padding are calculated on the outside of that width and height, adding additional space even if it's set to width:100%;. In order to counteract this, you simply need to set the element with the border to box-sizing:border-box;. That brings both the border and the padding inside of the width and height calculation.

Try this:

#my-container { width: 500px; }
#first-name-label { display: inline-block; width: 30%; }
#first-name {
   width: 70%;
   -webkit-box-sizing: border-box; /* Safari, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   box-sizing: border-box;         /* Opera/IE 8+ */

Or if you want to be more specific to just text inputs, try this:

input[type=text] {
   -webkit-box-sizing: border-box; /* Safari, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   box-sizing: border-box;         /* Opera/IE 8+ */

CSS Syntax:

box-sizing: content-box|border-box|initial|inherit;

Browser Support:

Chrome (any): box-sizing
Opera 8.5+: box-sizing
Firefox (any): -moz-box-sizing
Safari 3: -webkit-box-sizing (unprefixed in 5.1+ versions)
IE8+: box-sizing

If you'd like to learn more about this, you can find a very informative article on box-sizing here:

    CSS Howto..

    Horizontal navigation menu - how to increase size of
  • on hover
  • How to create a progress bar

    how to ensure that each time a css class name changes from the previous, it is applied a specific style

    CSS - How to prevent ul/ol li's second row of text from going further left than the first line?

    How to bump up text?

    How to hide a div based on its class

    How to change css class for multiple DOM elements with jQuery? [closed]

    How to nest multiple css attributes inside another attribute

    How to apply text rotation in CSS?

    How do I select all div-elements where first-child is not a table

    how to set an element at fixed relative position in html rendering.? [closed]

    CSS: Background in front of image - how to prevent it?

    How do I select this Div with CSS

    DropDown Menu won't show for more than a second..not working.

    [HTML][CSS] How to change opacity of background-image but not the text on it?

    How can I use CSS or Javascript to switch images on mouseover as simple and lightweight as possible?

    How to get same cursor(hand) on links in all browser?

    How to vertically align text over an image

    Using a lot of style sheets. Needing opinions on how to move forward efficiently

    How to wrap text without whitespace? [duplicate]

    CSS: How to change css class of li in a navigation

    How can I click a specific li without an id or class?

    Child div's evenly spaced and flushed to side of parent: how to?

    How to create a QT plugin that customizes UI?

    How do I achieve this particular hover effect?

    How do I display a DIV if the current version of the program is greater than the version I have?

    How to find the second value with same CSS class using Selenium webdriver

    How to make diagonal titles on html tables

    How to use media queries in css

    How to deal with my sharepoint datetime control css?