CSS divs running into each other 4x3 screens but notwidescreen

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!

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" <webforumsuser (AT) macromedia (DOT) com> wrote

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!

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" <webforumsuser (AT) macromedia (DOT) com> wrote

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!

I think my audience would run at minimum 1024x768 resolution (gamers so have
updated computers with higher than 800x600 resolution). I think I've set the
divs' widths, but not the container width.

For option 5e: So if I set the container width to 90% (to create blank space
of left and right) and each div within the container to a certain %, will this
solve my issues? For instance, if I set 2 divs inside the 90% container to 40%
width each, and 5% margins on the left and right will that make the divs fill
up the container equally with 5% margins on the outside and a 10% margin in the
middle? Would equal div margins effectively center the divs? If not, how do
you center divs on the page?

If I went with 5b: do i just set the container width to 922px (90% of 1024),
then set the actual pixel width of the divs inside to 369px (40% of 922 px
container) with 46 px margins on left and right? This would be comparable to
the 5e settings above but with fixed div widths, right?

If these work, then wouldn't 5e be preferrable since it ensure only 10% of the
screen is blank regardless of the user's resolution or screen format? I just
don't want too much blank space.

Thank you very much. Everything is more complicated that I originally
thought, but I'm learning slowly but surely!

I think my audience would run at minimum 1024x768 resolution (gamers so have
updated computers with higher than 800x600 resolution). I think I've set the
divs' widths, but not the container width.

For option 5e: So if I set the container width to 90% (to create blank space
of left and right) and each div within the container to a certain %, will this
solve my issues? For instance, if I set 2 divs inside the 90% container to 40%
width each, and 5% margins on the left and right will that make the divs fill
up the container equally with 5% margins on the outside and a 10% margin in the
middle? Would equal div margins effectively center the divs? If not, how do
you center divs on the page?

If I went with 5b: do i just set the container width to 922px (90% of 1024),
then set the actual pixel width of the divs inside to 369px (40% of 922 px
container) with 46 px margins on left and right? This would be comparable to
the 5e settings above but with fixed div widths, right?

If these work, then wouldn't 5e be preferrable since it ensure only 10% of the
screen is blank regardless of the user's resolution or screen format? I just
don't want too much blank space.

Thank you very much. Everything is more complicated that I originally
thought, but I'm learning slowly but surely!