margin-left and half-hidden divs

[danny]

I have a DIV centred in the middle of the page thus

.text {width: 34em; text-align: center; margin: 0 auto;}

I want to put another DIV (an AdSense skyscraper) half-over the right-hand edge of this, e.g.

.adsky {float: right; margin-right: -80px;}

With

<div class="text"><div class="adsky">... </div> ... </div>

This works in Mozilla, Safari, etc., but in IE 6 the right half of the adsky DIV is blanked out - ie, only the left half that overlaps the text DIV is visible.

Any ideas on how to fix this?

[edisraf321]

Why not make the .adsky absolutely positioned inside the relatively positioned .text?

.text {
 position: relative;
 width: 34em;
 text-align: center; 
 margin: 0 auto;
}
.adsky {
 position: absolute;
 right: -80px;
 top: 0;
}

[danny]

That doesn't work - that results in the adsky and text DIVs overlapping one another (at least in Mozilla). Any other ideas?

[SuzyUK]

danny... have seen this before and I'm sure it's a z-index thing.. but not sure if just stacking the floated div will be enough..

try:
.adsky {
float: right;
margin-right: -80px;
position: relative;
z-index: 200;
}

maybe it'll need a width on the float too.. which should be OK as you know the width of the ad?

let us know

Suzy

[edisraf321]

danny,

yes, well you have to pad the right side of the .text block. That way the text will stop short of flowing all the way to the right side. Pad it half with the width of the .adsky container that hangs over.

.text {
position: relative;
width: 34em;
text-align: center;
margin: 0 auto;
[b]padding-right: 100px;[/b] /* pad the .text div so that text doesnt flow under .adsky div */
border: 1px solid green;
}
.adsky {
position: absolute;
right: -100px; /* position it half off the .text div */
top: 0;
border: 1px solid red;
width: 200px; /*width of right ad bar */
} 

Hope that clears it up,
-Chris

[danny]

But I want the text to flow under the ad! I just don't want it to actually overwrite the ad (obviously).

I tried the z-index, but without the width - I'll try them together and see if that works.

Thanks for the suggestions.