css positioning issue..

my page has the main content centered and then a left and right div for the background images - you can see it at www.naughtygoat.org

i used css to style the three divs like this:



#left {background-image: url(i/leftback.gif);
background-position: top right;
background repeat: repeat-y;
width:1000px;
position:absolute;
right:50%;
margin-right:400px;
height:100%;}

#right {background-image: url(i/rightback.gif);
background-position: top left;
background repeat: repeat-y;
width:1000px;
position:absolute;
left:50%;
margin-left:400px;
height:100%;}

#container {position:absolute;
left:50%;
top:0px;
margin-left:-400px;;
width:800px;
height:100%;



it works fine on firefox and opera, but on IE the background images don't show up at all and the center div is on the left.. where did i go wrong?

thanks in advance..

Should your urls be in quotes? That's probably not it but consider this a free bump! :)

first of all.. i think you should rearrage your markup...

and place your divs in a wrapper that will hold your page together..

centering div..

body{padding:0;
margin:0;
text-align:center;
}

text-align:center;<-- this is the way to center a div in IE and this would center all the block elements in the body.. so....

this below...

#wrapper{width:X <--width of your design;
text-align:left; <-- this overrides the text-align:center in the body to keep all the containing block under the #wrapper aligned to the left..
margin:auto;
}


this should fix your problem in IE...

may want to consider making a class for this

<div style="position:absolute; height:90%; width:100%;"></div>

For me..

"as much as possible.. never use... absolute position..."

trust me..

rather use floats.. than absolute..

I second to avoid absolute positions, since from your CSS, it's clear that you are not aware of the right effects/consequences (in fact there is no need for an absolute position to build a layout like this).

In particular, you have some errors in your CSS, see http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.naughtygoat.org%2F&profile=css21&usermedium=all&warning=1&lang=en
background repeat: repeat-y; of both #left and #right
should be
background-repeat: repeat-y;