Content of div is longer then div itself when width is set to 100%? [duplicate]

Answer 1

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.

Answer 2

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.}

Answer 3

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

Answer 4

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