Question

I need two divs to look a bit like this:

    |               |
 ---|    DIV I      |------------------------
|   |_______________|                       |
|             DIV II                        |

This is an easy task if I know the absolute position, but my divs can be dragged with JQuery .draggable(), so the position is unknown.

How can I accomplish this task?

Answer 1

If you position div I relatively within div II, you can draw it “outside” div II by using negative margin. For example:

.divi {
    width: 200px;
    height: 70px;
    margin-top: -40px;
    margin-left: 30px;
}

If, however, divi can be dragged also, then you may have a bit of troubles making this work with pure css.