CSS Margin/Padding Issue on Browser Zoom

Question

I am having difficulty getting my page to show up correctly at various browser zoom settings.

http://andstones.ca/newsite

The content is aligned if the user is zoomed out on the page, but once they zoom too far out and refresh the page, or if they are too zoomed in and the page loads, then the content pane is shifted.

This does not seem to be an issue in firefox, but it is a very serious issue in chrome/safari/iexplore and on the iPad.

What can I do to ensure that the main content loads in the correct position regardless of user browser settings?

Thanks ,

Kory

Answer 1

Define all your CSS values in percents so they are relative to each other. The problem is when browsers adjust the pixel values and drop a few digits here and there.