Please help me avoid using tables!

[hansg]

Hi Guys

Its a WinIE problem,and I can't see away around it. I've built a page using CSS, carefully testing each addition in Mac IE5.2 (as it's notorious for falling apart), Firefox (checking each addition meets standards as I go) and Safari and everything has been fine, except that Mac IE5 won't centre the page, but wth - I can live with that.

Then I tested it on Win IE and it's mostly fine, except the second <div> layer is incorrectly positioned (yet everything else is ok!). It's a 880px wide div supposedly centered within a 904px div, but it looks as if it is ranging right - but I can't understand why - and it's driving me mad!

http://www.sutherlandhawes.co.uk/stchtml/misaligned.jpg

I'm doing this as a favour to my wife's church and if I can't get the CSS to work I'm going to have to revert to tables (you'll see I've already ducked the CSS for those news snippets - that was way too complex!), but I'd much prefer to use CSS...

Can anyone help?

the html:
http://www.sutherlandhawes.co.uk/stchtml/test2.html

the css:
http://www.sutherlandhawes.co.uk/stchtml/test1.css

Thanks in advance

Hans

[rangana]

That is because of the background color in your rhcontainer div.


background-color: #ccc;


What's the problem you were pointing on the left arrow?

Hope it helps ;)

[hansg]

The background grey colour shows that the <div> is out of position - it shouldn't be overlapping the shadow

The left hand arrow is pointing to the thin white line at the side of the blue masthead that shouldn't be there - it should just be blue

this is what it should look like

http://www.sutherlandhawes.co.uk/stchtml/aligned.jpg

[hansg]

:eek:

on another look I realised that the lh margin of the inner div had been set to 12px, but the rh margin was 0px. As soon as I changed it to 12px everything fell into place!

:D