Menu
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.
577
Go to Settings, Ease of Access, click the “Display” option, Turn off "Automatically Hide Scroll Bars in Windows".
Are you setting width and padding on the same element? then the total width of the inner div will be 100% + 10px, which will result in a scroll bar.
To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML.
Web browsers do not take into account the width of the scrollbar on the side of a page when computing width values, so since we have a page that is longer than a single viewport, part of our page is being rendered behind the vertical scroll bar, causing the browser to display a horizontal scroll bar.
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.
164
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
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
