A TEST [to determine once & for all...Browser Size vs. Resolution]

stay with me on this one, please...

[Background: someone told me once that a typical browser (IE)...with the monitor set to 1024 X 768...will display as 1003 X 567.]

so w/ the little guy still in mind, I design my web pages for that size...& also so that they will center on larger monitors &/or higher screen resolution settings.

I use a simple CSS parent & child layering system of coding in the Body for that purpose:

<div id="Layer1">
  <div id="Layer2"></div>
</div>

& in the Head I just set my margins & padding to zero as follows:

body, html{
margin:0;
padding:0;
}

SO...I set up the following simple test page, which has both parent & child layers set to 1003 X 567. The child layer has background color. Open the page; & minimize your browser so that there are NO horizontal & vertical scroll bars (then maximize to see the background color layer perfectly centered):

http://www.moonjams.com/1024_768.htm

NOW...go to THIS page...set up exactly the same way codewise (except for the height of the parent layer...which should only have an effect on the vertical scroll bar)...where the three images you see are spread to fill the 1003 px wide parent layer perfectly...

...& you'll see that that when your browser is minimized (from the previous resizing)...this page is WIDER...& a horizontal scroll bar has appeared:

http://www.jerseyrails.com/wjhc_clp_sfrt.htm

please view the source code for both pages & tell me freakin' WHY...???

thanks,

mark4man