Why do I get a horizontal scrollbar for width: 100% in chrome?

Question

Starting with:

html, body 
{ 
    padding: 0; 
    width: 100%;
    font: 100%/1.45em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

Chrome decides that the width should be 1600px, which is wider than my current display, let alone the current Chrome window. I'm sure this is an old chestnut, but I'm failing to find the right tree.

I posted a complete example to git://github.com/bimargulies/css-mystery.git.

One note: My macbook was plugged into a very wide monitor, and is now not. The 1600px seems to me to be related to that, but I don't know how to make it go away except to reboot.

In the chrome devo tools, looking at the effective styles for the , I see:

width: 1600px;
   html, body - 100%

That 1600 is very mysterious. And this is after a reboot.

EDIT bingo: buried in the style sheet main.css, from someone else I work 'with', was 'minWidth: 100em;' on body. oops.

Answer 1

You need to add margin: 0 to remove the default margin on the body element.

Are you sure you need width: 100%?

html and body are by default "full width" due to being block-level elements.

Answer 2

Try using a CSS reset...

http://meyerweb.com/eric/tools/css/reset/index.html

... to set all CSS properties to their default values.

I hope this helps.
Hristo