CSS divs running into each other 4x3 screens but not widescreen

Question

I am trying to develop a site:
http://www.poweredupgamers.com.
Everything looks great on a widescreen monitor, but when I view it
on older 4x3 monitors the divs run into each other and the spacing
gets all messed up. This occurs regardless of the resolution the
monitors are using.
I thought by setting up margins with % (5% left margin for
left div, etc.) that the divs would change in size to fill the
pages regardless of the resolution the monitor is set at. The divs
do seem to adjust for the resolution, but the monitor format
appears to be a different issue. Do I need to set fixed div
positions or widths to fix this issue? If so, how do I set them to
ensure the page is filled properly (as little blank space as
possible) regardless of the monitor's resolution?
Does it have anything to do with fixed sizes for certain
images inside divs sizes based on % margins?
Thanks very much for any help!

Answer 1

Resolution is not the critical issue. Browser viewport width
is. To make
your decision you need to have some ideas about the following
issues -
1. What is the primary target demographic for this site?
2. What are the browsing habits of that demographic? Do they
normally have
their browser window maximized on the screen?
3. If they usually have their browser maximized, what is the
typical screen
width?
4. If they usually do NOT have their browser maximized, what
is the MINIMUM
screen width in that demographic.
5. How do I want to build the page?
a. Fixed width and left aligned?
b. Fixed width and centering?
c. Flexible to fill whatever width from left to right?
d. Flexible (within limits) and left aligned?
e. Flexible (within limits) and centering?
As you can see, this decision is probably much more complex
than you
thought, and will require that you know quite a bit about
your intended
target visitor and their browsing habits.
If you elect to go with 5a, or 5b, then your decision would
be - 'what is
the mimimum browser width I want to support without
horizontal scrolling?'.
Once you have determined that minimum supported width, all of
your decisions
are made. That's how wide you want your page to be.
If you elect to go with 5c, then you just build your page
within a flexible
container (the simplest example - although an obsolet one -
would be to use
a 100% width table to hold the entire page). Be aware that
pages with
limited text content can look VERY sparse and empty on wide
viewports when
built in this way.
If you elect to go with 5d, or 5e, then you would add this
sophistication to
your decision matrix -
'what is the greatest width I want to allow the page and its
contents to
become?'
In this case, you would use the CSS styles - 'min-width' and
'max-width' on
the primary page container. Just so you'll know, although
these styles are
well supported *now*, earlier versions of IE (and some other
browsers) will
not support them so reliably.
So - which is it? 8)
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"juxtafras" <[email protected]> wrote in
message
news:[email protected]...
>I am trying to develop a site:
http://www.poweredupgamers.com.
Everything
> looks great on a widescreen monitor, but when I view it
on older 4x3
> monitors
> the divs run into each other and the spacing gets all
messed up. This
> occurs
> regardless of the resolution the monitors are using.
>
> I thought by setting up margins with % (5% left margin
for left div, etc.)
> that the divs would change in size to fill the pages
regardless of the
> resolution the monitor is set at. The divs do seem to
adjust for the
> resolution, but the monitor format appears to be a
different issue. Do I
> need
> to set fixed div positions or widths to fix this issue?
If so, how do I
> set
> them to ensure the page is filled properly (as little
blank space as
> possible)
> regardless of the monitor's resolution?
>
> Does it have anything to do with fixed sizes for certain
images inside
> divs
> sizes based on % margins?
>
> Thanks very much for any help!
>