Stacking Div's with CSS - Covering text div

[RobSil]

Hey all,

I have a button at the top of my screen. When it is clicked I want to cover entirely a div that is full of text. I try this css on my cover div and it covers the entire screen instead. I am using jQuery to insert the div into the document...

Sample:
<div class="textdiv">This is my long row of text... will fill an entire page.
</div>

Inserting: <div class="textCover"></div> either before/after the div.
.textdiv {}

.textCover {
float:left;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background: url('bg_transparent_1px.png') repeat;
z-index:99;
}

I would assume since the "textCover" div is a child of the "textdiv" the 0,0,0,0 woudl cover up that div, not the entire screen. If I add position:absolute; to textdiv, then my div does not grow vertically properly.

Any with advice on how best to fix this? Do I need to restructure my CSS for the entire page or is there a way I can wrap div's around my body area etc. when necessary?

Rob

[swa66]

Sorry for the late reply.

Try inserting it in the <div class="textdiv"> and make sure .textdiv has "position". The easiest to make something gain position is to give it "position:relative".

BTW: IE6 won't honor setting both top and bottom (nor left and right) at the sam etime to define an unknown height or width), and translucent pngs are an even bigger problem for legacy IE.