:: bwalden ::

Hey Michael,

I noticed an error on www.WhiteHouse.gov tonight that’s throwing the content one pixel off-center at certain browser widths.

Currently, the site’s background image lives in a top-level div called “page,” which is positioned with:

background-position: 50% 0;
background-origin: initial;

The content lives in a div called “page-inner” directly top of the background, positioned with:

margin-left: auto;
margin-right: auto;

The two different methods of centering these divs are thrown out of alignment when the browser has a width of an odd number of pixels (50% values round up; "margin: auto" rounds down) and the content appears one pixel off.

The easy fix here is to position the background image using "margin: auto" such that the content and background agree how to behave when the browser is an odd number of pixels wide. The “page” div would have to be nested in an empty parent div with a fixed width so it has something to be centered in the middle of, and both should be set to "overflow: hidden;" to avoid forcing scrollbars. I tested this locally and it fixed the issue.

Best wishes,

- Max

(Source: maxistentialist)