Re-sizing to 1024px produces horizontal scroll bar...but all divs measure 1024px

css, html

Solution

1024 pixels is the total width of the screen.

In order to fit content on a 1024 pixel screen, you need to account for the vertical scroll bar (usually 16-24px in width) and (in some browsers) the window's edge. These will take away horizontal space.

Bottom line: You need to use a smaller width for your content than 1024 pixels. A number that is popular among designers is 960 pixels, also because that can be evenly divided; it's used e.g. by the 960 grid system, a popular CSS framework.

However, in my experience, a slightly higher number (like 980 or even 1000) will also work well for the majority of devices.

Problem

I need some help: http://www.stansellelectric.com If you go to any page on this website and re-size your monitor (or Firefox browser if you use the Web Developer toolbar) down to 1024x768, a horizontal scrollbar will appear both in the #contentwrap div and the page itself. Now, increasing the width of the window to 1039px fixes this, however I need it to stay at 1024px and not have a scrollbar anywhere. I'm stuck, help please?

Original source