I am building a site, using divs. I’ve set the body and wrapper to be positioned absolute. When I zoom in to make the site large, it displays fine, but when I zoom out to make the site smaller, my boxes go all over the place. I’m not sure what I’m doing wrong, can anyone help me? the site is cloudcastleprod.com
Thank you!
Most likely the problem is the position absolute. Your body and wrapper should not be position absolute.
I tried that too, didn’t work :-/
OK, for a start, your website is much too wide. You should always make sure your site can fit on a 1024×768 monitor without horizontal scrolling, and good practice is for it to fit on 800×600. Yours needs 1390px, which isn’t sensible at all.
The problems start because your entire system is built around floats, working on the basis that the page body will be about 1390px, or at least less than 1624px (which is the width of the header image plus the width of the next float). Any time the effective page is wider than that (and if you’re zooming to 50%, that means your page only needs to be 812px wide to cause the problem), the item on the left can float up alongside the header image, and it gets worse from there on.
A quick fix would be to slap a max-width:1390px on the wrapper div, which should ensure that when you zoom out, the overall page width shrinks as well, unlike at the moment where it continues to take up the full width available.
But to be honest, that’s just a bodge, and it doesn’t address the underlying structural problems, which are caused by an over-reliance on floats, without enough clearing and containing going on. It is compounded by the inline image, which really should be part of a background image; that would stop the page being so darned wide and overflowing on narrower windows.
I was going to do that originally, but I wanted to see if it would work well the way I did it now. I guess it’s not a good idea 
thanks for the tips. I’ll probably do what you suggested, with the background image instead.