divide the page in three parts using div tag

Question

I am trying to get the below layout for more than 1.5 hours but still can't get the right solution.

well if there are any duplicates then forgivve me for asking this question.

I want to have a layout like below diagram using div tag:

|_________________________________________________________________________________ |                                            |                                                                                                                     | |                                            |                                                                                                                     | |                                            |                                                                                                                     | |                                            |                                                                                                                     | |                                            |__________________________________________________________ |                                            |                                                                                                                     | |                                            |                                                                                                                     | |                                            |                                                                                                                     | |                                            |                                                                                                                     | |                                            |                                                                                                                     | |                                            |                                                                                                                     | |                                            |                                                                                                                     | |                                            |                                                                                                                     | |__________________________________________________________________________________

I know how to do it using table tag.

Answer 1

float:left is your friend

HTML:

<div id="wrapper">
    <div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
</div>

The CSS:

div {
    display: block;
}
#wrapper {
    width: 400px;
    height:400px;
}

#first {
    float:left;
    width: 33%;
    height: 100%;
    background: red;
}

#second {
    float:left;
    width: 67%;
    height: 30%;
    background: green;
}

#third {
    float:left;
    width: 67%;
    height: 70%;
    background: blue;
}

Example: http://jsfiddle.net/Vkmq3/1/

Answer 2

Here is exact JSFiddle or JSBin

Make CSS as

#upleft { 
   width:100px; 
   height: 300px; 
   background:red; float:left; 
}

#upright { 
   width:300px; 
   height:200px; 
   background:blue; 
   float:left
}
#below { 
   height:300px; 
   width:400px; 
   background:green 
}

And in HTML

<div id="upleft"></div>
<div id="upright"></div>
<div id="below"></div>