Question

Let’s just say I have three divs: DIV1, DIV2, DIV3 is this particular order.

I would like to stack them like that:

    (BIG|DIV1
   DIV2)|DIV3

I have tried with positioning and floats, unfortunately DIVs just overlaped, hide or stacked one under the another.

Any help or advice would be great.

UPDATED
My current code:

.div1
{
    position: absolute;
    margin-left: 125px;
    width: 500px;
}

.div2
{
    position: relative; 
}

.div3
{
    clear: both;
}

And the result:

 (BIG|DIV1
DIV2)|
 DIV3

HTML:

<div class="div1">DIV1</div>
<div class="div2">(BIG <br /> DIV2)</div>
<div class="div3">DIV3</div> 

Answer 1

This solution employs a relatively-positioned wrapper. I’m hoping that this is available to you.

http://jsfiddle.net/LLRR8/2/

#div1 {
    height: 50%;
    position: absolute;
    right: 0;
    top: 0;
    margin-left: 120px;
}
#div2 {
    height: 100%;
    width: 120px;
    position: absolute;
    left: 0;
    top: 0;
}
#div3 {
    height: 50%;
    position: absolute;
    top: 50%;
    right: 0;
    margin-left: 120px;
}
#wrapper {
    position: relative;
}

<div id="wrapper">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>