Jump to content
Killersites Forums

Setting page widths


bigdave
 Share

Recommended Posts

Hi everyone, I have a pretty specific question about setting page widths in CSS.

I've been told that if you're using fixed page widths (which I am at the moment) the ideal page width to set is around 960 pixels, taking into consideration the most commonly used screen resolution being 1024 x 768.

Does that mean that on 1024x768, a width of 960 pixels will usually completely or mostly fill the browser screen?

On some of my designs I actually want to deliberately put "empty" space at either side and have the main design centred in the middle, but have a background image that fills the browser screen.

I know I could set widths in % but as I'm starting out I want to have everything fixed in pixels so it's easier to work out how to exactly position everything.

Link to comment
Share on other sites

Correct, a width of about 960px will fill up most of the space in a 1024x768 resolution screen without causing horizontal scroll bars. If you want to have more of the background show on a 1024x768 screen, you'll need to make the width narrower.

 

Keep in mind that the 1024x768 resolution is dropping in popularity, with about 85% of people having larger resolution than that.

 

http://www.w3schools.com/browsers/browsers_display.asp

http://techcrunch.com/2012/04/11/move-over-1024x768-the-most-popular-screen-resolution-on-the-web-is-now-1366x768/

Link to comment
Share on other sites

Ben,

Your first link has informative stats besides display resolutions.

 

Here's the July 2012 Browser Statistics:

 

Internet Explorer 16.3 %

Firefox 33.7 %

Chrome 42.9 %

Safari 3.9 %

Opera 2.1 %

 

Thanks for an interesting link.

 

PS: Old school thinking is make your sites compatible with even the oldest browsers--

don't include the fancy stuff. And make sure your site looks the same on each browser.

 

New school: Would you want black/white streamed to your new hi-definition, state-of-the-art

TV? Of course not--you want the latest features exploited. And if you have an old TV, you will

have incentive to update to a new one. Use HTML5 and CSS3 even if the old versions of IE can

not handle some of the features. Just make sure your site is functional even without CSS and

JavaScript. As someone put it, escalators don't break, they temporarily become stairs.

 

Oh, and it's okay if your site looks different on different browsers! Most people only use one,

so they would not even notice that they are "missing rounded corners" for instance, nor would

they care. It's nonsense that the output has to LOOK identical.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  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.

Loading...
 Share

×
×
  • Create New...