How can I get the red box in the code below to display to the right of the first blue box, without putting the first two boxes in a separate div, if possible?
the only way would be if you knew the height of the box. using AP or RP… or even margin-top:-200px;
unfortunately negative margin values for top /bottom are still calculated based on the WIDTH and NOT THE HEIGHT of the parent so that nixes using margin-top:-50%
Actually I missed out part of the code, the 3rd div is higher than the others so switching the order would not work immediately unless I apply a margin-top:-140px on #box2.
What is preferable, to apply this negative margin-top on #box2 or apply absolute positioning on #box3 (together with a margin-left) to get it into place? Both give the same result visually.
Whether you use negative margins or absolute positioning the potential is that you will create an overlap somewhere along the line unless what comes next isn’t controlled explicitly.
In your example you could just remove the red box from the flow and then it will line up as you wanted.
A negative bottom margin equal to its height will do:
It all depends on the real dynamics of the site and why you are tying yourself to the structure you have given above. You could just absolutely place each element but of course you lose the flow of the document and you don’t get an automatic effect.