CSS Dashboard columns do not float next to eachother - html

Question

So i'm having a problem that is hard to explain. Here is the JSFiddle showing the problem :
http://jsfiddle.net/c9cwB/
CSS:
#container {
width: 400px;
height: 400px;
}
.div1 {
width: 50%;
display: inline-block;
height: 50%;
background: green;
float: left;
}
.div2 {
width: 50%;
height: 50%;
display: inline-block;
background: blue;
float: left;
}
.div3 {
width: 50%;
background: red;
display: inline-block;
height: 100%;
float: left;
}
Html:
<div id="container">
<div class="div1"></div>
<div class="div3"></div>
<div class="div2"></div>
</div>
What I want to happen is for the blue box to sit right under the green box so it looks like a website dashboard.
How do I do this? You can change css/html to fix it.

Answer 1

You can float the .div3 right and add clear:left; to the .div2 to get the desired layout (You can remove the display property as it is of no use combined with floats).
I also simplified your CSS code by adding a class to both left divs and using it to style them.
DEMO
HTML :
<div id="container">
<div class="div1 left"></div>
<div class="div3"></div>
<div class="div2 left"></div>
</div>
CSS :
/* Styles go here */
#container {
width: 400px;
height: 400px;
}
.left {
float:left;
width: 50%;
height: 50%;
}
.div1 {
background: green;
}
.div2 {
background: blue;
clear:left;
}
.div3 {
width: 50%;
background: red;
height: 100%;
float: right;
}

Answer 2

You have to chage the float on your div3 class.
it should be float: right; instead of float: left;
.div3 {
width: 50%;
background: red;
display: inline-block;
height: 100%;
float: right;
}

Answer 3

How about wrapping the ones you want to the left in another layer:
http://jsfiddle.net/dactivo/c9cwB/6/
<div id="container">
<div id="wrapper">
<div class="div1"></div>
<div class="div2"></div>
</div>
<div class="div3"></div>
</div>
/* Styles go here */
#container {
width: 400px;
height: 400px;
}
#wrapper{width:50%; display: inline-block;height:100%;float:left}
.div1 {
width: 100%;
display: inline-block;
height: 50%;
background: green;
float: left;
}
.div2 {
width: 100%;
height: 50%;
display: inline-block;
background: blue;
float: left;
}
.div3 {
width: 50%;
background: red;
display: inline-block;
height: 100%;
float: left;
}

Answer 4

Try Demo
<div id="container">
<div class="div3 right"></div>
<div class="div1"></div>
<div class="div2"></div>
</div>

Answer 5

Asumming that .widget is a item/box of the dashboard you can use:
.widget {
float: left;
}
.widget:nth-child(even) {
float: right;
}
Demo: http://codepen.io/torresandres/pen/wnIxF