Keeping divs and background aligned

Divs slightly out in different browsers

[thesheep]

I've got a centered background image, then a <div> called #position, containing everything, then I have a couple of absolutely positioned <div>s inside that. The problem is that in IE the inner <div>s spill out very slightly over the background, and in Safari they are slightly more out. Other browsers are slightly inside. Do I need some kind of box hack or something here? Page is at

<No personal URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>

body {margin:0 auto; padding:0; position: relative;
background-image: url(../images/bkgrnd.gif);
background-repeat: repeat-y;
background-position: center;
text-align: center; border: 0; }

div#position {
position: relative;
width:754px; margin: 0px auto;
padding:0; border: 0; text-align:left; }

div#rhs { width: 162px; position: absolute; right: 0; top: 115px; }

div#rhs img { border: 1px solid #9A9E5C; border-width: 1px 0 1px 1px; margin: 0; padding: 0;}

[edited by: DrDoc at 4:57 pm (utc) on Aug. 16, 2004]

[thesheep]

Whoops, I'm not used to that, sorry.

It's a shame as it would be easier for people to see what I'm talking about. Maybe I can post an image, hmm.

[thesheep]

OK this may be easier to understand:

I'm trying to make a 3 column layout within a fixed width (centered) page.

Should I use 3 floating columns, or 1 relative <div> in the middle with 2 absolute <div>s on either side? In either case I'm finding it hard to get the right hand column to sit exactly flush with the right hand side of the page.

Could be the way the broswers calculate the center point value for the background - some round up/down? Any way around this?

[createErrorMsg]

I know this is annoying, but rather than write a lengthy answer, I'm going to refer you to some good, established resources on this very thing...

1. Position Is Everything [positioniseverything.net] - tutorials on 3 column layouts.

2. BlueRobot [bluerobot.com] - several tutorials on multi-column layouts.

There are others. MANY others. Search and ye shall find.

[edited by: DrDoc at 8:02 pm (utc) on Aug. 17, 2004]
[edit reason] Fixed broken URLs. See TOS and Forum Charter [/edit]

[thesheep]

OK thanks. I sort of knew some of that stuff was around.

Actually my page is now fine in IE5, IE5.5, IE6, Mozilla, Firefox. So I'm thinking I don't need all these tiresome hacks. (I don't really like them anyway, what happens if a new browser comes along that is wrongly triggered by the hacks? Have to change everything.)

My page probably survives because there are fair sized gaps between the columns. I floated each column left. This solved most of the problems.

Only browser that messes it up (that I found so far) is Safari. The background to the main wrapper is set as {background-position: 400px 80%;} and on Safari it pokes out a pixel too far over the right hand edge of the page.

[createErrorMsg]

I floated each column left

You probably already know this, but be sure to carefully test this layout. If the container holding those floats ever gets too skinny for all three of them, it will drop the last one down below the others. Just a warning. Make sure they're contained in a fixed width container (no EMs or %s).

[thesheep]

Yeah, thanks it's a fixed width, so I'm hoping it should be OK.