hi guys

 

how can i set auto adjust resolution on my website, so that it fits on every resolution?

 

just for the width, not height. Doesn't matter if I have to scroll up and down....just dont want it to scroll left and right on every resolution.

 

Looking forward to an answer....

 

Thanks in advance

 

 

TripLeCore

You're talking about fluid width. You can achieve that by coding all widths in % (divs, forms, tables, lists, every element including side margins and side padding, all to total 100%.

 

Side borders can't be sized in % so if you have them, leave them in px and make the total of the other items 97% or 98% to allow for the borders.

 

You also need to code images in % width (don't state a height and the height will adjust in proportion) like

<img src="image.jpg" style="width: 35%" alt="image description" />

 

You will find that your page will look very squashed up in a small window like 320px (hand-held resolution) and very spaced out in a large window like 1920px, so you need to be careful with your design. It works best if there isn't much on the page, or all text which breaks into lines.

 

A different solution is not to use % for anything, but use a containing div with max-width and min-width and elements with no width inside will expand or contract within those limits. IE6 doesn't process min or max width so you have too use a conditional comment with a fixed container width for IE6.

Width of images should never be set in % unless there are some specific requirements.

A different solution is not to use % for anything, but use a containing div with max-width and min-width and elements with no width inside will expand or contract within those limits. IE6 doesn't process min or max width so you have too use a conditional comment with a fixed container width for IE6.

 

this issue also has an alternate solution.

take an image of 1x1 pixel, usually a spacer.gif. now if you want your width to be of minimum 960px. put this image in the very start or end of your wrapper div and set its width to 960px. This image will not take any space and not be visible but will restrict your layout to minimum of 960 even on very small screens. this technique can also be used for height.

Width of images should never be set in % unless there are some specific requirements.

 

I agree that it's not desirable, but a totally fluid page can also be undesirable because it can expand and contract too much.

 

If you have a totally fluid width page but fixed width images, when you reduce the window resolution the divs become less wide than the images inside them, so the page layout is wrecked and images are either cut off or stick out to the right of the container, so in those circumstances you have to use % width for images.

There should always be a minimum width of every design. otherwise whatever you do it will look wrecked on narrower browser window. Fluid width should always be for wider resolutions and sometimes it does look good