1 reply [Last post]
Last seen: 12 years 36 weeks ago
Timezone: GMT-4
Joined: 2003-08-31
Posts: 19
Points: 7

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>

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

body, html{

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):


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:


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



Tyssen's picture
Last seen: 8 years 34 weeks ago
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I didn't really understand

I didn't really understand about all the minimising/maximising and what the actual question is but I'd say it's because the images in the second example are absolutely positioned.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference