Reset a block element's width

Question

I have a problem using a given CSS file I don't want to change. In this file there is a format for inputs:

input {
  display:inline-block;
  width:60%;
}

Now I want to use an additional CSS file and change this formatting to a normal block element width full width:

input {
  display:block !important;
  width:auto !important;
}

Unfortunately, this doesn't work. Unlike normal block elements, the input does not take all the available horizontal space with this setting. It is only as long as it would be as inline element. Additionally, I cannot use width:100%; due to padding, borders and margin. In my desperation I already tried something like width:none;, but I couldn't find a way to reset the width to a block element's default value.

I really hope that somebody can help me. Thank you in advance.

score 5 · Accepted Answer · answered Aug 06 '11 at 15:40

5

You must use width: 100%, so my answer shows how to fix the problems you're having with it.

https://developer.mozilla.org/en/CSS/box-sizing

input {
    width: 100%;
    margin: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

If margin is required, then wrap the input in another element and apply the margin to that.

answered Aug 06 '11 at 15:40

thirtydot

224,678
48
389
349

Remember to reset the padding and the border too. – leopic Aug 06 '11 at 15:45
The example you mentioned is the workaround I use at the moment. This won't work in older browsers and, as you said, there is still the margin problem. Using additional containers is possible but I was looking for CCS-only solution. @LEOPiC: There is no need to reset padding and border when using box-sizing: border-box. – Sebastian vom Meer Aug 08 '11 at 08:11
@SebastianG: There is no *viable* solution (unless you don't care about dropping the native styling: http://jsfiddle.net/p273P/, or you don't mind using something ugly like this: http://stackoverflow.com/questions/5219175/) that works in older browsers. http://jsfiddle.net/thirtydot/JGdpn/ (a demo of my answer) is the sensible solution. You usually have a `
` (or `
`) and a `
` anyway, so you get the wrapper for free. Who *really* cares if there's an extra 4px hanging out [in IE6/7](http://caniuse.com/css3-boxsizing)? Users of those browsers have more problems to worry about.
– thirtydot Aug 08 '11 at 08:36
Probably you're right with IE6/7. Thank you for your explanation. – Sebastian vom Meer Aug 08 '11 at 19:15

Reset a block element's width

1 Answers1