How do I make site look like 1000x800px on bigger screens?

[elias75]

The site on all screens that are about 1000x800 looks really nice and exactly how I wanted it to be.... However, in bigger screens all the elements of the pages are positioned quite far from each other leaving big empty spaces in between them... How do I fix this so that in any bigger screens the site still looks as if it was in 1000x800?
I am using Dreamweaver and obviously swim in newbiness :)

[rocknbil]

so that in any bigger screens the site still looks as if it was in 1000x800?

Do you mean maintain 1000 pixels width on any monitor, or maintain the same proportion as if it were on a 1000 pixel monitor?

This has been the challenge of developers since the birth of the Internet, develop a GUI that will work properly on millions of output devices, none of which you will ever see. There are almost as many ways to resolve it. Mine would be this.

If you want 1000 pixel width, use pixel widths for your container and center it (or not) in the viewport:

#main-div {
width:1000px;
margin: 0 auto 0 auto;
}

But the problem here is that this may render very small on a high res monitor, or cause a horizontal scroll bar on a lower res one (typing this through my 21" CRT as we speak, it's set for 1024 X 768 ATM, but many 17" 800 X 640's out there still.) A second solution is to set your page at 100% width, which "kind of" meets the second condition:

#main-div {
width:100%;
margin: 0; /* Since it's 100%, no need to center */
}

But wait again, what about those uber cool super wide aspect ratio monitors in high resolution? This makes my web site TOO wide, and there are now lines of text over 20 inches wide, making a legibility problem as bad as 6 point text. Now what?

One solution is to set the max-width property on the container, but this is not supported by IE6. My argument here is that if they are on IE6, the likelihood of them having an extremely wide monitor is very slim.

#main-div {
width: 100%
max-width:1000px;
min-width:800px;
margin: 0 auto 0 auto; /* as it may or may NOT be 100% */
}

This is my approach and I am by no means an "expert" but appears to work for IME. Welcome aboard!

[elias75]

Hi rocknbil,

yes I want to maintain the pixels width on any monitor.

thanks for your input, very informative! I think the last approach is what I need. However, my site is using tables and I am still trying to figure out if your suggestion can fit into tables... does it?
cheers!

[rocknbil]

<table id="main-div">

Sans CSS,

<table width="1000" align="center">