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. http://jsfiddle.net/hNaM7/12/ outWidth: 356 (for the input box, as shown in debug console)
  2. http://jsfiddle.net/hNaM7/13/ outerWidth 351
  3. http://jsfiddle.net/hNaM7/14/ outerWidth 349
  4. http://jsfiddle.net/hNaM7/15/ outerWidth 349
  5. http://jsfiddle.net/hNaM7/20/ 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 {
   display:inline-block;
   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:

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

http://css-tricks.com/almanac/properties/b/box-sizing/


    CSS Howto..

    How to horizontally repeat two different bg gradients to the entire page width?

    How do I obtain a floating element's left offset while it is outside the viewport?

    How to make interactive logo design without flash?

    How to style a XUL textbox with CSS :focus

    How to get css and django working on live server

    How can I get rid of those animation in jquery toggle?

    How to make a grid with one style?

    How to scroll LI items in a fixed height UL?

    How to generate CSS using Garden with ClojureScript (lein-garden)

    How to wrap text inside an iframe with designMode on, using css and also javascript if necessary?

    How to apply Hovering on html area tag?

    How to force parent div to expand by child div width/padding/margin/box?

    How to dynamically remove all unwanted CSS and JS from page

    How to animate an icon for with CSS?

    How to center li tags list

    How to make a HTML element fill a dynamically sized container using CSS

    How to make a CSS horizontal navigation menu?

    CSS Nav Menu Text rare behaviour in size thats aligned bottom some how

    How can I set different gradients as background, each time user refreshes?

    How do I disable Emmet's CSS Abbreviations in Sublime Text 2

    How to manage clashing third party CSS

    How do I get a link to ignore hover on mouseover?

    css not showing inline

    Get the Navbar to show when hovering over header image

    How can I build a CSS selector that will highlight/outline a focused tab, while not effecting other non-tab widgets?

    How to add border/outline/stroke to SVG elements in CSS?

    How to make parent div above child div without position absolute?

    How can I center div, inside other div with bootstrap classes?

    How to animate transitions triggered by links

    How to make text all on the same line when adding div tags?