Jeff 0

Hi -

I have a site I'm working on where mostly everything is div floats, text, and images that are all pixel specific(no ems). When a user enlarges/ zoom out everything is fine in that nothing breaks. But on many pages - a page zoom in/ reduce causes the divs on the right to drop down the page.

I tried wrapping the right side divs in a absolute positioned container - but then they just drop with in it. Why does the page reduction cause the divs to think they are to big for the container they are wrapped in but displays fine at regular size?

examples with absolute right container:

examples without is pretty much all the rest:

I've really only been working regularly with css for the last 6 months so there is allot i'm sure im missing - especially with floats. Any tips or points in the right direction to fix this would be so appreciated - Thanx

3 answers


What browsers are you having trouble with? I've tested zooming in Chrome 4, FF 3.6, and IE 8. Those all look fine.

Answered over 9 years ago by Joshua Clanton

Zooming (true zooming) should have no effect on layout at all. It is merely like magnifying the rendering, but with the advantage of fonts being properly rendered rather than image-scaled. Text-zoom (a la Firefox) will make elements expand, but unless element widths are set in ems, they should only grow longer, not wider.

Finally, I question the general attitude to floats. I often think its a good thing when a float drops. Which is better for the reader in a narrow viewport - that the content column is squished to 300px wide while there are still sidebars fully visible, or a (generally of lower relevance) sidebar dropping out of the way while the content remains at a readable width? We have come to regard floats as a tool for laying out columns, mainly because the css tool more suited to that task - display:table - has not been usable for so many years. I believe that the original concept of float - an element which occupies space if it is available - is useful, and one we should embrace more.

Answered over 9 years ago by Richard Grevers

Since you're going for a fixed-width, I think you would stand to gain a lot from adopting one of the many popular grid layout "frameworks" that take care of most of your tricky float issues for you. Studying (and modifying) their code is a good way to get up to speed quickly on the CSS box model, and the visual rhythm they impose can make a layout much less haphazard in appearance.

Answered over 9 years ago by Nathan Duran