CSS Positioning and Browser Resizing

Bryan R. Meyer

Hello Everyone,

The problem of browser resizing has become an issue for me. While
redesigning my webpage, I set the left and right margins to be auto so
that my content would be centered. However, there are images that I
used absolute positioning in order to place them in the appropriate
location on my page. When I do a browser resize, these images do not
move (obviously). However, the rest of my content is auto centered as
appropriate.

What is the best solution for this problem? Could I use percentages
to position the images rather than by using pixel position?

My test page is at: http://www.bryanrmeyer.net/newpage. Notice how
the navigation buttons (Archives, Projects, etc) stay fixed while the
rest of the content is resized.

Any input is appreciated as always.

A CSS Novice,
Bryan

Jul 20 '05 #1

Vigil

On Sun, 18 Apr 2004 15:05:10 -0700, Bryan R. Meyer wrote:

What is the best solution for this problem?

You could put the image divs or spans inside a containing relative div. If
you use position:absolute for the image divs, they will then be positioned
absolutely, relative to the containing div, not the page body.

--

..

Jul 20 '05 #2

Barry Pearson

Bryan R. Meyer wrote:

Hello Everyone,

The problem of browser resizing has become an issue for me. While
redesigning my webpage, I set the left and right margins to be auto so
that my content would be centered. However, there are images that I
used absolute positioning in order to place them in the appropriate
location on my page. When I do a browser resize, these images do not
move (obviously). However, the rest of my content is auto centered as
appropriate.

What is the best solution for this problem? Could I use percentages
to position the images rather than by using pixel position?

[snip]

Just a few thoughts, not a final solution!

I notice that you have a number of problems here. One is that in IE 5 the
content ("web page text", etc) is narrower than the header & footer images.
Another is that when the user views with a larger text size, the display
breaks apart vertically. (Your problem is not just the left to right
alignment). I suggest you try various browsers & some more extreme conditions
such as large text to check.

Also, you have a fixed-width layout that is probably a little too wide for
people using 800 x 600 screens, and even worse for people using non-maximised
viewports.

I wonder whether you could reduce all of these problems together? I haven't
explored them in detail. Note Vigil's response. Perhaps you should wrap
*everything* in a single centred <div>? This will mean that you then only have
to think about vertical positioning. Then have a set of containers below
one-another within that. Consider floats as an alternative to absolute
positioning for the individual buttons, but that is just another option.

Also, you are perhaps using absolute positioning to make the buttons appear on
top of the image? If so, another way of doing that is to make the image a
background (put there by the CSS) instead. You may be able to make a more
flexible-width layout without horizontal scrollbars. (Sometimes absolute
positioning and other forms of positioning are tricky to mix).

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

Jul 20 '05 #3

Bryan R. Meyer

Barry,

Thank you for your thorough response. Indeed, there are many things I
haven't tested for including text size. I was mainly looking at the
page appearance in Netscape 7 and IE 6. I have not even begun to
think about other browsers. It is clear that IE 5 would also be a
good one to test. However, I am completely disregarding the dreaded
Netscape 4.

You mention that the fixed-width layout is a bad idea. Indeed, my
header graphic is way too big for those using the 800x600 resolution.
I suppose then that the solution would be to shrink the image using a
graphics program. But then the layout is still fixed-width since the
other content to be placed should fit within the width of the header
graphic. So why then is the fixed-width layout a bad idea? How else
could the layout be flexible-width if the width of the header graphic
is indeed fixed? Are you suggesting that all of the content should be
left-centered?

I realize there are a lot of possibilities on where to go with this.
I was just trying to get more details as to your thinking.

Thanks,
Bryan

Jul 20 '05 #4

Barry Pearson

Bryan R. Meyer wrote:

Barry, [snip] You mention that the fixed-width layout is a bad idea. Indeed, my
header graphic is way too big for those using the 800x600 resolution.
I suppose then that the solution would be to shrink the image using a
graphics program. But then the layout is still fixed-width since the
other content to be placed should fit within the width of the header
graphic. So why then is the fixed-width layout a bad idea? How else
could the layout be flexible-width if the width of the header graphic
is indeed fixed? Are you suggesting that all of the content should be
left-centered?
What I said was "... you have a fixed-width layout that is probably a little
too wide for people using 800 x 600 screens, and even worse for people using
non-maximised viewports".

I believe there is a place for fixed-width layouts. (Although many don't
agree). The vast majority of the on-line news services in the world have a
fixed-width layout, and lots of people read them. My photograph pages
(including the galleries) are fixed-width layouts, and my next version of them
will be too. But when I designed them, I made the substantive content 700
pixels wide, because that appeared to be OK for people using an 800 x 600
screen.

I don't think this is a big issue. Your main image is 782 pixels wide, and I
feel that a safer limit is around 760 or so.
I realize there are a lot of possibilities on where to go with this.
I was just trying to get more details as to your thinking.

Chuckle! Don't read too much into my thinking. I am doing the easy bit -
throwing out problems & ideas. You have the hard task.

I've been putting a lot of thought lately into how to wrap elements so that
they hold together under difficult conditions. Images, where possible, should
be in the backgrounds identified by CSS, not in the HTML. But I still have
layouts that blow apart too easily under extreme conditions. It tends to come
down to the fact that browsers don't understand what I am trying to do,
because CSS isn't a layout language, so if there is a problem, they go in all
directions. Whereas, if I used a table, they would have no doubt whatsoever
what I was trying to do, and would almost certainly succeed or come close.

Good luck.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

Jul 20 '05 #5

Bryan R. Meyer

I feel like I'm beating the same drum over and over, but if I don't
ask questions, I'll never learn. It seems as though I can make a
fixed-width layout quite easily if I move all of my content to the
very left of the browser window without centering it and having auto
margins. But if I don't center it, it looks stupid on resolutions
higher than 800x600 because then there is empty space on the right.
(See the following website -
http://start.verizon.net/vzn.isp/welcome.htm?ver=13567& - for an
example of this.) I think the fixed-width layout is fine but having
it auto-centered would be best. On the higher resolutions, the white
space would be evenly divided on each side of the content rather than
on one side of it. On the 800x600 resolution the page would fit into
the entire window. What is best for the website viewer?

What I'm questioning most is this concept of absolute positioning.
Why have it? It seems useless if you're trying to design your page
for all these resolutions. For example, if you go to my main web
page, http://www.bryanrmeyer.net, and change the text size, you'll see
that in the middle column, the text and picture overlaps the "Modified
Date" text. I understand what is happening, but how then does
absolute positioning help me? For my new webpage,
http://www.bryanrmeyer.net/newpage, I attempted to use the absolute
divs to place the image buttons in a container and then place that
container in a relative div so that the buttons could be placed over
the header graphic. However, I can't get the "Archives" button over
the header graphic. The snippet of code is below.

body {
background-color: #c9c9c9;
scrollbar-base-color:#718292;
background-image: url(http://www.bryanrmeyer.net/newpage/Images/header.jpg);
background-position: 50% 0%;
background-repeat: no-repeat;
}

div.archives {
position: absolute;
top: 140px;
left: 130px;
}

div.content2 {
position: relative;
top: 5%;
left: 10%;
}

<div class="content2">
<div class="archives">
<a href="Archives" onMouseOver=onImage("archives");
onMouseOut=offImage("archives")>
<img src="Images/archives_off.jpg" alt="Archives" name="archives"
border=0>
</div>
</div>

This is really frustrating, but I really want to understand how this
works. I just am getting confused with the positioning.

Thanks for any suggestions you could provide.

Bryan

Jul 20 '05 #6

Leonard Blaisdell

In article <7a*************************@posting.google.com> ,
br***********@verizon.net (Bryan R. Meyer) wrote:

(See the following website -
http://start.verizon.net/vzn.isp/welcome.htm?ver=13567& - for an
example of this.)
I must have got the wrong page.

I think the fixed-width layout is fine but having it auto-centered would be best.
You ought to see this thing in my browser. I'm running MacMozilla1.2.1 at
640x480 and much of the text is flysh*t small. It looks like a clueless
corporate site from 1996. Are you supplying stock quotes? Do you have a
link to "Sports"?
What is best for the website viewer?
Any-size-design which this is far from.

What I'm questioning most is this concept of absolute positioning.
Why have it?
Because it might be better supported by browsers in the future? If it is,
you might be able to make better one-size-design. Honestly, I haven't
worked with positioning much and scrapped it when I tried. If I do, I will
probably confine it to the left side of the document.
I understand what is happening, but how then does
absolute positioning help me?
You can make fine websites without it. Learn and use the CSS property "float".
This is really frustrating, but I really want to understand how this
works. I just am getting confused with the positioning.

I suggest that you think of the user's browser window as a thing you can't
control and make fluid sites where the content drops down when the window
isn't wide enough. Nobody likes to sidescroll.

leo

--
<http://web0.greatbasin.net/~leo/>

Jul 20 '05 #7

Neal

On Tue, 20 Apr 2004 20:07:33 -0700, Leonard Blaisdell <le*@greatbasin.com>
wrote:

You ought to see this thing in my browser. I'm running MacMozilla1.2.1 at
640x480 and much of the text is flysh*t small. It looks like a clueless
corporate site from 1996. Are you supplying stock quotes? Do you have a
link to "Sports"?

Are you referring to the Verizon site he posted as an example of CENTERING?

I don't think he's claiming this is an exampe of great web design. He
simply wants to know how to do something and he posted an example.

Are you always this ornery, or just with people new to progressive web
design??

Jul 20 '05 #8

Leonard Blaisdell

In article <op**************@news.rcn.com>, Neal <ne*****@spamrcn.com> wrote:

Are you referring to the Verizon site he posted as an example of CENTERING? I don't think he's claiming this is an exampe of great web design. He
simply wants to know how to do something and he posted an example.
I was sure I was wrong. I just didn't see the correlation between what he
cited as an example and what he gave as his site. I still use 640x480
resolution. Even though I can change it, I don't. The community needs to
know my comfortability along with those of special needs.
Are you always this ornery, or just with people new to progressive web
design??

Good '&deity', no! I try to pass softballs. My apologies to the OP if you
are offended. I guess smileys are in order :) :) :) :) :) I don't
withdraw my advice, however.

leo

--
<http://web0.greatbasin.net/~leo/>

Jul 20 '05 #9

Barry Pearson

Bryan R. Meyer wrote:

I feel like I'm beating the same drum over and over, but if I don't
ask questions, I'll never learn. It seems as though I can make a
fixed-width layout quite easily if I move all of my content to the
very left of the browser window without centering it and having auto
margins. But if I don't center it, it looks stupid on resolutions
higher than 800x600 because then there is empty space on the right.
(See the following website -
http://start.verizon.net/vzn.isp/welcome.htm?ver=13567& - for an
example of this.) I think the fixed-width layout is fine but having
it auto-centered would be best. On the higher resolutions, the white
space would be evenly divided on each side of the content rather than
on one side of it. On the 800x600 resolution the page would fit into
the entire window. What is best for the website viewer?
I think fixed-width layouts look better when centred. But unless I have
specific need for a fixed-width layout, such as photographs, I prefer flexible
width.

However, I do have one case where most of the pages are flexible width and
take up the full width, but on one page I use a "maximum width" effect
(centred). I "felt" it was better. Here is the "maximum width" page, where the
central part of the page won't expand above 700px, but will contract very
small.
http://www.barry.pearson.name/papers/value_chain/
What I'm questioning most is this concept of absolute positioning.
Why have it? It seems useless if you're trying to design your page
for all these resolutions. For example, if you go to my main web
page, http://www.bryanrmeyer.net, and change the text size, you'll see
that in the middle column, the text and picture overlaps the "Modified
Date" text. I understand what is happening, but how then does
absolute positioning help me? For my new webpage,
http://www.bryanrmeyer.net/newpage, I attempted to use the absolute
divs to place the image buttons in a container and then place that
container in a relative div so that the buttons could be placed over
the header graphic. However, I can't get the "Archives" button over
the header graphic. The snippet of code is below.
If you want an example of flexible layouts using absolute positioning, have a
look at this (crude) example:
http://www.barry.pearson.name/articl...lexible_00.htm
from:
http://www.barry.pearson.name/articles/layout_5_3/

Parts of the layout are fixed width and absolutely positioned, while the
central part isn't positioned at all and takes up the available space. It has
wide margins to miss the positioned parts. This is quite a common technique.
Remember that you are not necessarily positioning relative to the page as a
whole, but possibly relative to a positioned container, which may be variable.
Indeed, the positioned bits may be variable width! There are many options.

But ... I prefer floats! It is easier to put footers into place if you use
floats as your positioning technique. And while you are safe using floats
within a simple layout table, it can be tricky using absolute positioning with
a table. You can build complicated pages using floats. A downside is that they
tend to "linearise" poorly. The order of the material in the document may not
be ideal for a blind person listening to it via a speaking browser, and a
search engine may see a less-effective sequence.

[snip] div.archives {
position: absolute;
top: 140px;
left: 130px;
}

div.content2 {
position: relative;
top: 5%;
left: 10%;
}
Try:
div.archives {
position: absolute;
top: 120px;
left: 130px;
}
div.content2 {
position: relative;
width: 782px;
margin: 0 auto;
}

(That won't centre in IE 5, but there is a "text-align" trick to solve that).

[snip] Thanks for any suggestions you could provide.

It is a bit like a game, trying to work out what boxes need to be wrapped in
other boxes. That applies whether you use floats or absolute positioning. I
often sketch out boxes within boxes on a piece of paper.

(Tables are just boxes, <td>, wrapped in boxes, <tr>, wrapped in a box,
<table>. They happen to be boxes wrapped in a formalised way, and browsers
know how to position them relative to one-another. You are replacing that
formal wrapping with one of your own. Your structure may be simpler, because
you perhaps don't need 3 levels of box, but you need to work the wrapping out
yourself. And the browser doesn't know how to position the result as you want,
so you have to tell it, using CSS. That is the upside & the downside).

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

Jul 20 '05 #10