26

I have div of fixed width containing only input text box and width of that input is set to 100%. I expect it to fill the div but instead it is slightly longer.

Demonstration code:

HTML:

<div class="container">
    <input class="content" id="Text1" type="text" />
</div>

CSS:

.container
{
    width: 300px;
    height: 30px;
    border: thin solid red;
}
.content
{
    width: 100%;
}

Result (Firefox):

enter image description here

This happens also in IE 8, Chrome, Safari... The overflow width seems to vary in different browsers. How do I make the content to exactly fill the width of the div?

thirtydot
  • 224,678
  • 48
  • 389
  • 349
Rasto
  • 17,204
  • 47
  • 154
  • 245

4 Answers4

90

box-sizing: border-box is a quick, easy way to fix it:

This will work in all modern browsers, and IE8+.

Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

See here for an icky IE7 compatible method.

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • so what is the cause of this strange behaviour ? – Rasto Mar 07 '11 at 11:32
  • 2
    @drasto: The fact that you're applying `width: 100%` to an element that has a border and padding. `border-box` fixes this by including this border and padding *inside* the `width: 100%` calculation. – thirtydot Mar 07 '11 at 11:34
  • so I can set padding on `div` to 0 and remove the border(that is there only to show the problem - will not be needed in production html) to fix it ? – Rasto Mar 07 '11 at 11:43
  • 3
    @drasto: No. It's the border/padding on the `input` element. To see what I mean, take a look at this exaggerated demo: http://jsfiddle.net/QkmSk/4/ – thirtydot Mar 07 '11 at 11:47
  • Just what I was looking for! Don't forget to use content-box or padding-box if the above does not work for you. – Joseph Lust Mar 06 '12 at 22:54
2

You need to reset the paddings, margins and the borders. If you want to apply it sitewide, you can use a reset css like Eric Meyer's : http://meyerweb.com/eric/tools/css/reset/

Or you can write your own. Just default it to your own values

JohnP
  • 49,507
  • 13
  • 108
  • 140
0

Also add a CSS reset to you page. the input may have some padding added!

benhowdle89
  • 36,900
  • 69
  • 202
  • 331
0

When I use your code, it shows fine here on Firefox. I suspect you have an issue with specifity: http://htmldog.com/guides/cssadvanced/specificity/

Or, there is a problem with the surrounding html. I.e. unclosed tag.

Try putting that CSS and HTML into a plain file to see if it displays correctly. If it does, I suggest taking a look at the CSS properties of the parent elements.

If you don't have it already, download the Web Developer Toolbar for Firefox, then use CTRL + SHIFT + F to enable the clickable element property display. This will help you debug what is happening.

Hope this helps.

Dave
  • 1,076
  • 5
  • 15
  • 30
  • 1
    It's nothing to do with specificity or invalid HTML. See the unfixed version of my answer: http://jsfiddle.net/QkmSk/1/ - admittedly the effect isn't very clear in Firefox, but the red border is covered by the `input`. – thirtydot Mar 07 '11 at 11:33
  • That isn't the case here using Firefox 3.6.14. The code the OP provided worked perfectly here without any adjustment. The input box was inside the red border. – Dave Mar 07 '11 at 11:36
  • I was observing the issue in 4 major browsers as stated in question, the demonstration code was writen in blank page html and the `html` tag has no atributes so I cannot imagine any problem there. Try to increase resolution of your browser by pressing `ctrl+'+'` – Rasto Mar 07 '11 at 11:47
  • hmm.. seems my browser had gone into quirks mode. *rolls eyes* :) – Dave Mar 15 '11 at 21:51