can anyone help me in resizing the wrapper according to resolution ?? i want it like this: if user's resulotion is 800 x 600, make the wrapper's width 780px if user's resulotion is 1024 x 786, make the wrapper's width 900px any help please??
Well, you could simply not set widths on things and use enough margins around the wrapper so that is automagically resizes with the browser window-- this is what block elements do naturally anyway. They try to spread out to 100% unless you say otherwise. Another option if you want a page to make a scrollbar under a certain size and stop expanding after a certain size is to use min-width and max-width on your wrapper. IE6 doesn't understand the CSS for this so it needs some CSS Javascript, which apparently was made just for it since all other browsers ignore it. Here's one deathshadow wrote for someone and I modified it for a site of mine: #container { overflow: hidden; min-width: 760px; max-width: 1020px; } * html #container { width: 760px; width:expression((document.body.clientWidth>1024) ? "1020px" : ((document.body.clientWidth>800) ? "auto" : "760px")); } Code (markup): I don't tab the way he does so it's all on one line but the * html part says first, if no JS capabilities, width is simply stuck at 760. Otherwise, then the browser screen width is larger than 1024, make the #container 1020px wide. If it's smaller than 800px then make the container 760px wide-- and anything in between those sizes is "auto" --meaning that it does its normal div thing and tries to fill all available space. An example page: http://stommepoes.nl/Scooterverzekeren/scooterafsluiten3nee.html Resize your window to the set widths to check. The Window Resize Extention for FireFox is pretty useful if you can't change your actual screen rez while testing this. And you really need to test it. A lot. With all browsers, esp since even after resetting your margins and padding, IE and FF and Opera and Safari etc still have different side widths and you can't let anything get cut off. Good luck.
The JS is for IE6 only. It's necessary because IE6 does not understand min or max anything (this means height too). I avoid JS like the plague if I can and I've been comfortably using this for about 2 months now. Plus, it degrades gracefully-- if JS is turned off on that IE6 browser, the website simply stays at the small size. You could also take my first option, like what this site (digitalpoint) does-- simply let the layout be completely fluid. Widths are simply not set and everything expands (or shrinks) with the browser window. Just set spaces with margins.