Zoom changes the design layout

Question

I am working on a new website, which should be "perfect" - compatible with ie6+, ff, chrome, opera & safari.

I made it compatible with all those browsers but there's one problem I cant handle - when changing the zoom, all the layout become disordered.

Sample fiddle with the problem: http://jsfiddle.net/pdQrQ/1/

In Chrome (14.0.835), FF (7.0.1) & IE9, when zooming out - the top right box size is changing (atleast it looks like it) and then it is not right aligned with the box below.

Edit:
I know what's the cause - the border!

Explanation: the zoom function on every browser changing the width/height of the div but not the border size therefore it cause this glitch/float. if I remove the border everything works perefct.

but I want to use border or else my design will be much uglier.

How can I fix?

Thanks!

Answer 1

My best guess for why is that this is due to rounding errors as it scales down. For example if you imagine a box which is 250px wide and contains two boxes side by side that are 125px wide each. Clearly these fit side by side. If you zoom out so that you are at half size then the outer box will be 125px and the inner ones 62.5px each which rounds up to 63px half pixels are as small as you get). These two now come to a total width of 126px so no longer fit side by side and one would have to go under the other.

This is basically the principle you have at work here I think. The best solution that I can see would be to make the two side by side boxes narrower and float one to the right so that your right border is unbroken. this may mean a slightly bigger gap down the middle but that gap can hopefully absorb rounding errors as you zoom out...

Edit:

As you have noted the borders are the main thing causing confusion. They can be taken off of the outer containers and put on a nested container designed just to add borders.

http://jsfiddle.net/chrisvenus/pdQrQ/6/

The above is a fiddle (based on yours) which creates inner DIV tags that contain the border while the floated containers have no border at all. This now seems robust enough to work in IE8, FF7.0.1 or Chrome 14.0.835.202.

The things changed were adding the div to the HTML and swapping some classes around between it and its parent. There was a new innercontainer class that sets the height and width to 100% to ensure it fills the containing box (and thus the borders are where they are wanted. Also I changed the width of the bottom box so that it lined up correctly.

Let me know if this does you.