Relative position when resizing browser - css

Question

I'have 3 div blocks and I would like to place them as in the picture.
It works with the following CSS code, but when I resizes my browser, the blocks aren't exactly at the same position (you can see it at the 2 pictures with comments).
Do you have an idea ? Maybe an other position (absolute or other ?).
PS : I use relative position because I use JqueryUI (draggable, resizable) to create blocks and to position them.
Thanks.
Here is the CSS code :
#corps {
background: black;
}
#bloc {
width: 40%;
background: blue;
position: relative;
top: 50px;
}
#bloc2 {
width: 40%;
background: lime;
position: relative;
top: 100px;
left: 2%;
}
#bloc3 {
width: 45%;
background: purple;
position: relative;
top: -300px;
left: 50%;
}

Answer 1

The problem here is the relative positioning. It's going to cause the elements to be positioned relative to the parent container #corps. If you don't plan on editing that with jQuery in any other way, it's not going to behave like you're describing you'd like it to.
Here's a jsfiddle that iterates the best way to accomplish what you're looking for with css using inline-block display and vertical alignment: https://jsfiddle.net/4gw22vrh/
#corps {
background: black;
}
#bloc {
width: 40%;
background: blue;
display:inline-block;
}
#bloc2 {
width: 40%;
background: lime;
}
#bloc3 {
width: 45%;
background: purple;
display:inline-block;
vertical-align:top;
}