Jump to content

Recommended Posts

This is debatable, but I generally try to have a fix width of anywhere from 980-1000 with a margin:0px auto; on the wrapping container to center it. I personally don't like using % because if someone happens to be running a tiny resolution it will shoot everything in the foot, where as fixed width forces  the page to be that big so the user with the small resolution would get a scroll bar.

 

A hybrid approach that you might consider is using something like jQuery to find the width of the window on page load, and then multiply that number by something like .9 (for 90% width) and apply that finished number as the fixed width of your parent wrapper.

It depends on the monitor resolution of your users. If you are targeting people in a 3rd world country, you may find that you need to target 800x600 monitors. In first world countries, generally targeting 1024 monitors is fine (so a width of 980px is ok). 960px is also a good number since it's divisible by 2, 3, 4, 5, 6 and 8. This means you can divide your page into various grids very easily.

 

Recently there is also a trend towards media queries, which re-arrange content based on monitor resolution, shifting things around as browser sizes change.

 

You can also use liquid layouts which are generally full width. To some degree these work the same as media queries, though media queries do it better.

 

I'd recommend a fixed min-width and a max-width, and a percentage value for the width property.. Then simply throw IE6 a fixed width in a conditional comment, and advice users to upgrade on a support page or something.

 

Keep in mind that resolutions change over time, and are likely to continue to do so for at least years to come.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.