My page looks good without zooming. but when i zooming in firefox and in IE, it looks ugly because some of the contents wraps down in to next line.
I think that the problem is in unit i am using. I am using pixels for setting the width.
What units I should use to prevent ugly look of pages while zooming?? Plz help
If you want to zoom everything (containers as well as fonts) you could use em. Beware though that it is notoriously difficult to maintain. If you change one parent size then all children sizes will be affected.
It could be partly solved by avoiding nesting tags as much as possible. Of course it's unavoidable most of the time, but don't go too deep if you don't have to.
Generally, using em's and percentages is a good choice as they are relative, rather than the definite pixel. If you set something as 4em wide (guessing the right figures is a fun game - start with maybe 10px=1em and go from there), then when you zoom/the text size is changed, the box stays about the same size relative to the text.
For reference, it's worth mentioning the EM is relative to the font size of it's parent. So 1em is 100% the same size as the font. Like mentioned in another answer, nesting them too many times causes a cascade.
It's also maybe interesting whether when you say zooming, you mean changing the font size. Zooming shouldn't affect the layout, whereas making the text would. (I'm normally a chrome user and away from my pc atm, so can't be sure for IE and FF).
Todays browsers have two different zoom methods: font-size scaling and magnification. The second one is no problem but the first one is. Because there only the font-size is increased/decreased but not the whole view.
So you should use a layout that uses the font-size as its base. Most browsers have a default font-size of 16 pixels. You can use that and derive almost any pixel value you want by multiplying with an appropriate factor.
If you, for example, want your main column’s width to be 800 pixels, use width:50em (50·16=800 or 800/16=50).