I’m attempting to rearrange some elements on a page which I do not want to resort to editing the HTML template on.
Since the code for the template is rather complex and full of crap, I made a brief diagram of the issue:
Basically, there is a main parent div (red) which contains two other divs (green and blue) positioned at the top and bottom of the parent div.
Inside of each of those nested divs is another nested div. Inside of the lower blue div, there is a div (purple) that is positioned on the left.
Inside of the upper green div is a div (yellow) which is currently absolute positioned to the right, relative to the main all-encompassing red div.
I want to move the purple div from the lower left corner all the way to the upper right corner. I know I can accomplish this by setting the purple div to
position: absolute; top: 0, right: 60px; (about)
However, there’s an issue. The yellow div has a dynamic width, so if I set the purple div to have a fixed offset from the right edge, the yellow div would eventually overlap with the purple div. If I were to compensate for overlapping, then it would also look really stupid with a lot of whitepace between the two items.
So, is it possible to position the purple div next to the yellow div, yet have it remain “relative” in a sense to the dynamic width of the yellow div? I have tried searching for possible solutions, but I’m not even sure what terms to use to describe this scenario. The only “solutions” I have been able to find were when two divs are wrapped in a parent div and the nested divs were already adjacent to each other. But, since that’s not the case here, I don’t know what to do.
