Posted by John Hosking on 12/20/06 02:06

Michael Bartos wrote:
> I have a web page in two versions of the same page. One uses absolute
> positioning and the other relative positioning.
> It's the same problem for each version,
> #container3, the main body of the web page doesn't "fit" correctly into its
> slot in Firefox and Netscape.
>
> http://www.panamphoenix.com/index2b.htm
> and http://www.panamphoenix.com/index2c.htm
>

They both look relative to me.

Here's your CSS, revised:

body {margin-left: 0px; font-family: "Lucida Sans", Verdana; }

#container1 {
border:0px; width:760px; height:50px;
background-color:#CC6600; color:#fffbd0;
padding-top:10px; padding-bottom:0px; }

#container2 {
border:0px; width:100px; padding-left:10px;
height:525px; background-color:#FF9900; color:#fff; }

#container3 {
border:0px; padding-left:25px; padding-right:25px;
width:600px; height:525px;
margin-left:110px;
background-color:#FFFBD0;
position:relative; top:-525px; left:0px; }

#container4 {
border:0px; padding-left:25px;
width:760px; height:40px;
background-color:#C13100; color:#fff;
position:relative; top:-525px; left:0px; }

You were leaving the padding out of your calculations. If container2 is
525px tall, so should container3 be. And that's how much the negative
offset vertically should be. The left offset for 3 should be 110px,
because the width (100) + padding (10) for 2 dictates it. And so on.

BTW, "container2" is kind of a meaningless name for a div; why not
"samples", "footer", etc.?

Your biggest problem is the fact that you're specifying pixels. Try a
fluid design and consider that the font sizes might be different.

What happens if a visitor lacks both Lucida Sans and Verdana? Try adding
sans-serif as the last family. (And drop Verdana.)

Good luck. HTH.
--
John

[Back to original message]