how can I fix position of divs in html?

Question

when I zoom-in, zoom-out my web page the position of all divs and items get disturbed.and when I again reset zoom to 100% it comes fine.Even this problem comes when open the same page in big screen laptop.How can I fix the div position.some of my css code-

/* hbg */
.hbg { 
background-color:transparent;
float:left; 
margin:2px 0 0 45px; 
padding:65px 456px 0 56px; 
width:137px; 
height:190px; 
background:#fff url(images/hbg_img.jpg) no-repeat top left;
}

/*solutions*/
.solu{ background-color:transparent;}
.solu_resize { margin:0 auto; padding:0; width:auto;}
.solu .smenu ul { margin:0 0 0 45px; padding:0; float:left; width:auto; list-         style:none;}
.solu .smenu ul li { margin:0 0; float:left;}
.solu .smenu ul li a { display:block; margin:0; padding:0; color:#5f5f5f; text-    decoration:none;}
.solu_resize img{ float:left; padding:0 0 0 0;}
........

Answer 1

This is because you provided absolute widths with floating elements. If you change the screen-size, the elements seem to be unsorted, because they are still of the specified size. Maybe size-definitions in percentage can help you out with this issue.

Answer 2

Hi Nectar,

Zoom-in and zoom-out means different things on different browsers. For instance on FF, you can zoom in "text-only." When the zoom feature affects text size, absolutely positions divs get messed up as you saw.

You can fix this problem by designing your page to be "elastic." Instead of using pixels, you define both coordinates and measurements in "em" units. An em is equal to the browser default text-size, which is usually 16px. To make life easier, reset em to 10px by putting the following in your stylesheet:

body {
font-size: 62.5%;
}

If the above code is in your style sheet, you can convert your pixels to em easily by dividing each pixel value by 10. For instance, using your code above:

margin:.2em 0 0 4.5em; 
padding:6.5em 45.6em 0 5.6em; 
width:13.7em; 
height:19em;

This should fix the zoom problem and also allow people to change text-size when viewing your page. This won't work for your sprites and you may still run into overlapping issues. If it gets messy, you may have to consider changing your layout approach. If you do experience overlap, I'd suggest you use overflow:hidden on all your divs and specify max-height and max-width where appropriate.

If you need to read more about ems and elastic design, here's a good tutorial: http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

And here's the W3 reference on max-height: http://www.w3schools.com/Css/pr_dim_max-height.asp