CODEWITHSUNDEEP
htmlcssforms
nonopolarity
nonopolarity

Reputation: 151036

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

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

Upvotes: 0

Views: 1821

Answers (4)

Mastrianni
Mastrianni

Reputation: 3930

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/

Upvotes: 1

Paul
Paul

Reputation: 149

Have you tried 

border-style: hidden

?

It's supposed to help ease border conflicts in table elements, which is sort of the same problem you're having.

Upvotes: 0

JohanVdR
JohanVdR

Reputation: 2878

http://jsfiddle.net/fA75f/5/

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

*,:before,:after {
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}

#my-container {
  width:500px;
}

#first-name-label {
  display:inline-block;
  width:30%;
}

#first-name {
  display:inline-block;
  width:70%;
}

Upvotes: 1

Gyroscope
Gyroscope

Reputation: 3151

How about something like this: http://jsfiddle.net/hNaM7/21/

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

Upvotes: 1

Related Questions