Within my code, there are three nested div elements:
<div id="div1">
<div id="div2"> // contains content
<div id="div3">
// includes some content with a form
</div>
</div>
</div>
All three div elements are positioned absolutely. My goal is to have #div3 align itself relative to #div1. For instance, if I set #div3's style to right:0px;, it should move to the right edge of #div1.
Important Note: Please do not suggest correcting the structure, as it was not created by me and I do not have control over #div1 and #div2.
My initial thought is to relocate #div3 to be a child of #div1 using jQuery. However, I am open to a pure CSS solution if one exists. If not, I will resort to using jQuery for the job.
Although I believed that my explanation was sufficient and did not require specific CSS instructions, here are some thoughts on how to style it using CSS:
#div1 {
position: absolute;
display: none;
}
#div2
{
position: absolute;
top: 85px;
left: 56px;
width: 300px;
z-index: 2;
}
#div3 {//add your CSS rules here to make it relative to #div1}