aligning 3 divs [closed]

Question

I'm good at some things but html/css layout isn't one of them.

I need to lay out a page with two divs on the left, div1 (height 30%, width 30%) on top and div2 (height 7% and width 30%) below div1. These 3 divs to be within a container div.

Then I need to add div3 to the right of div1 and div 2. Div 3 to be width 70%, height 100%.

***************************************
*   div1   *         div3             *
*          *                          *
************                          *
*   div2   *                          *
*          *                          *
*          *                          *
*          *                          *
***************************************

I've tried every combination of floating, clearing and black magic that I can think of but I can't get div 3 to line up where I want it. I'd appreciate it if someone could fill in the skeleton below with the correct stuff to accomplish this layout.

<style type="text/css"?
    #container {position: absolute;width:100%; height:100%} 
    #div1 {position:relative;width:30%;height:30%;}
    #div2 {position:relative;width:30%;height:70%;}
    #div3 {position:relative;width:70%;height:100%;}
</style>
<div id="container">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

Answer 1

This question is better on stack overflow and most likely a duplication somewhere...

None the less here is the answer your looking for:

<style type="text/css"?
#container {width:100%;height:600px;}
#column1, #column2 {float:left;height:100%;}
#column1 {width:30%;}
#column2 {width:70%;}
.column1-top {height:30%;}
.column1-bottom {height:70%;}
</style>

<div id="container">
    <div id="column1">
        <div class="column1-top"> </div>
        <div class="column1-bottom"> </div>
    </div>
    <div id="column2"> </div>
</div>

I have even made this into a working demo on Fiddle for you to view online and alter if required.