Zooming out on Browser causes styling issues

Question

When zooming out on Firefox (and most other browsers), the layout of the right side-bar and the top menu breaks. The side-bar jumps to the bottom of the page. To replicate this issue, please visit the site and:

1. Find Zoom Out under the browser view menu and click it a few times.
2. Pay attention to how it affects the menu and the sidebar.

The only solution that I found to this so far is to decrease the width of the sidebar with a few pixels and decrease the width of one of the menu list items. The problem with this dummy fix is that when the site is viewed on actual size, then it is visible that the menu is missing a few pixels on the width.

Surely, there must be a better solution to this issue. Do you know?

Answer 1

AFAIK, desktop browsers do not use subpixel-resolution for layouts (WebKit does currently have an implementation pending, but no word on other browser engines). That's the reason why you can't use fractions of a pixel when sizing boxes in CSS. Zooming only scales the CSS properties by a common zoom factor and the rounds off the remainder (I'm guessing it floors the values) so that the layout engine can work with integers instead of floating point numbers.

There is no hard solution to this apart from trying to pick pixel values that divide evenly between the zoom levels. Another approach would be to use a percentage-based width definition for the containers – that way, the browser will round off the numbers correctly for you and if the common width of both containers never exceeds 100% (you might need to subtract a tenth or hundreth of a percent due to rounding), you should be good to go on all zoom levels.

This is not to be confused with CSS3 scaling, which does allow you to scale arbitrarily (and indeed can result in edges that do not align to the screen pixels), since this does not affect layout in any way.

EDIT: Example: size the columns using percentages

#left-area { width: 66.3179%; /* 634/956 */ }
#right-area { width: 33.6820%; /* 322/956 */ }