Zoom changes the design layout

by

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.

More Related Contents:

  1. css ‘pointer-events’ property alternative for IE
  2. What are all the valid self-closing elements in XHTML (as implemented by the major browsers)?
  3. Disable double-tap “zoom” option in browser on touch devices
  4. Which browsers support data URIs and since which version?
  5. How do you disable browser autocomplete on web form field / input tags?
  6. Determine a user’s timezone
  7. Why do browsers match CSS selectors from right to left?
  8. What’s the difference between disabled=”disabled” and readonly=”readonly” for HTML form input fields?
  9. How can I draw vertical text with CSS cross-browser?
  10. Remove white space above and below large text in an inline-block element
  11. Make page to tell browser not to cache/preserve input values
  12. Correct way to use Modernizr to detect IE?
  13. How to make HTML Text unselectable [duplicate]
  14. How to prevent a browser from storing passwords
  15. Flexbox alternative for IE9
  16. How to add google chrome omnibox-search support for your site?
  17. Force browsers to load CSS before showing the page
  18. Fallback for CSS attributes without unit
  19. Is the HTML shown via ‘View Source’ different from the HTML shown in (Firebug) developer tools?
  20. How can I locate the default style sheet for a browser?
  21. How to detect HTML 5 compatibility in browser
  22. HTML: how to force links to open in a new tab, not new window [duplicate]
  23. Setting minimum size limit for a window minimization of browser?
  24. HTML5 audio not working on Firefox
  25. Extra space under textarea, differs along browsers
  26. header/footer/nav tags – what happens to these in IE7, IE8 and browsers than don’t support HTML5?
  27. Why use data URI scheme?
  28. Is any way that is safe to display videos in a browser
  29. How to make input autofocus in internet explorer?
  30. How to always show the vertical scrollbar in a browser?

Leave a Comment