site 'falls apart' when zooming out

Question

Why does my website ‘fall apart’ when I zoom out significantly ?

Are there certain CSS properties that tend to rectify this issue ?

Here is a link to the web page in question:

http://www.raycavanaugh.com/per%20word.html

Answer 1

1. I agree with Diodeus's comment above: Browser zoom was never intended to be able to maintain a layout at all resolutions. Most websites fall apart once you've zoomed out or in significantly.

2. CSS approaches that help:

   1. Having a fixed-width, centered wrapper around your content. Ex: Zoom in or out on this page
   2. margin: auto; or text-align: center to center elements instead of static values
   3. Fluid layouts styling with percentages

Most of these are issues that should be thought of in the design phase, and overlap heavily with what should happen as the browser window re-sizes. If the site looks good at various browser widths, it will likely also look good zoomed in and out (to some degree).

Ex: When your site is viewed in a wide or very narrow browser the header looks odd. I'd suggest adding:

#menu-container {
    width: 700px;
    margin: auto;
}

Or putting a 'frame' of some kind around the content.