Need help with positioning elements for IE6

[tes...@interdyne.com]

I'm working on a website that looks great in Firefox, IE 7 and IE 8 ,
but in IE 6 one of the elements appears below another element instead
of to the right where it is supposed to be. The site is at
http://www.indppc.com/. The main stylesheet is at
http://indppc.com/templates/transparent_bliss_1.5/css/template.css and
I'm detecting if the browser is IE6 and inserting CSS specific to IE6
at http://indppc.com/templates/transparent_bliss_1.5/css/template-ie6.css.
In summary, I have three elements:

<div id="leftwrap">
</div>

<div id="topbannerad" align="top">
</div>

<div id="right">
</div>

With CSS:
#leftwrap{
float: left;
}

#topbannerad{
z-index: -1;
}

#right {
z-index: -1;
}

Instead of "right" being to the right of "left" it is below it in
IE6. Can anyone tell me what I need to do to get it positioned
correctly?

Thanks

Tom Esker

[tes...@interdyne.com]

On Jul 22, 6:49 pm, tes...@interdyne.com wrote:
> I'm working on a website that looks great in Firefox, IE 7 and IE 8 ,
> but in IE 6 one of the elements appears below another element instead

> of to the right where it is supposed to be.  The site is athttp://www.indppc.com/.  The main stylesheet is athttp://indppc.com/templates/transparent_bliss_1.5/css/template.cssand

> I'm detecting if the browser is IE6 and inserting CSS specific to IE6

> athttp://indppc.com/templates/transparent_bliss_1.5/css/template-ie6.css.

> In summary, I have three elements:
>
> <div id="leftwrap">
> </div>
>
> <div id="topbannerad" align="top">
> </div>
>
> <div  id="right">
> </div>
>
> With CSS:
> #leftwrap{
>       float: left;
>
> }
>
> #topbannerad{
>        z-index: -1;
>
> }
>
> #right {
>        z-index: -1;
>
> }
>
> Instead of "right" being to the right of "left" it is below it in
> IE6.  Can anyone tell me what I need to do to get it positioned
> correctly?
>
> Thanks
>
> Tom Esker

I pretty much figured it out. IE6's default position is static and
any element (left at the static default) that has sub elements with
position: absolute, will be positioned relative to the top upper left
of the parent element, not the top of the browser window. So I
changed my CSS like thbelow and everything is positioned correctly -
except that I can't get it centered. I tried 3 different ways to
center the parent element as mentioned at http://css-discuss.incutio.com/?page=CenteringBlockElement
but none of them worked. Oh well. Anyway here is how I did the CSS
even though it's not centered:

#wrapper{
/* 4 lines below are supposed to center the content but it didn't work
*/
width: 1024px;
left: 50%;
top: 50%;
margin-left: -512px;
}

#leftwrap{
float: left;
position: absolute; left: 10px; top: 7px;
margin-top: 5px;
width: 180px;
}

#topbannerad{
height: 100px;
margin-top: 5px;
width: 580px;
margin-right: 5px;
position: absolute; left: 195px; top: 7px;
z-index: -1;
}

#right {
width: 580px;
text-align: left;
position: absolute; left:195px; top:130px;
z-index: -1;
}