We overlap two Divs using "postion:absolute" and z-index.
The text in the green zone (div id="Zone2") is hide by text in the yellow zone (div id="Zone3"). Any help on how to display the text?
Edit1: We can't use nested divs.
A:
I'm not sure what all the absolute positioning is good for, but you might want to put the yellow zone into the green-zone div, and use a float.
Justus Romijn
2010-10-21 08:31:30
@Justus: Thanks for your reply but nested divs are not an option :(. I am wondering is that if we add another zone and add zone 2 and zone 3 at the same level on the new zone. Will this work? Will text be wrapped around zone3(yellow zone)?
Malik
2010-10-21 08:48:28
Can't you use nested div's at all? Because you can use this code to generate a placeholder for the yellow div, and put the yellow div with absolute positioning on top of that.
Justus Romijn
2010-10-21 08:52:25
I am afraid we can't use nested Divs at all. In these divs, "SharePoint Web Part Zones" will be added and "SharePoint Web Part Zones" can't be nested.
Malik
2010-10-21 08:56:07
I'm sorry but then I can't think of a css-solution for this problem. With absolute positioning, the elements don't care about other elements around it. They just take the position specified and that's it. You can use padding to make the green zone fill the space below the yellow zone, but there won't be any text there.
Justus Romijn
2010-10-21 09:07:13
I've added the padding solution in my answer.
Justus Romijn
2010-10-21 09:11:36
A:
Simplest way I can possibly think to do this:
Uses one nested div inside the Zone2 to wrap your text and make it appear as if it's wrapped to Zone3.
This is similar to using a <p> or <span> with display: block;.
Kyle Sevenoaks
2010-10-21 09:18:03