placing a div next two divs above each other

Question

I want to place the 3 divs as shown in the photo div number 2 must stick to the bottom

here is what i have done: http://jsfiddle.net/GLHur/1/

Answer 1

Try this:

http://jsfiddle.net/GLHur/18/

<div class="con">
    <div id="div3"></div>
    <div id="div1_2">
        <div id="div1"></div>
        <div id="div2"></div>
    </div>
</div>

#div3{height:100px;width:100px;border: solid 1px #000; display:inline-block; background:red;}

#div1{height:30px;width:100px;border: solid 1px #000; position:absolute; top:0; background:blue;}
#div2{height:20px;width:100px;border: solid 1px #000; position:absolute; bottom:0; background:green;}

#div1_2{display:inline-block; vertical-align:top;}


.con { position:relative; }​

Answer 2

This works:

    #div3{height:100px;width:100px;border: solid 1px #000;
display:inline-block;}
    #div1{height:30px;width:100px;border: solid 1px #000;}
#div2{height:20px;width:100px;border: solid 1px #000; position: absolute; bottom: 0}
#div1_2{display:inline-block;vertical-align:top; position: relative; height: 100px;}

Answer 3

Something like this?

http://jsfiddle.net/GLHur/6/

---

Or does the height change once you add content?