html - CSS Dashboard columns do not float next to eachother -

html - CSS Dashboard columns do not float next to eachother -

so i'm having problem hard explain. here jsfiddle showing 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 want happen bluish box sit down right under greenish box looks website dashboard.

how do this? can alter css/html prepare it.

you can float .div3 right , add together clear:left; .div2 desired layout (you can remove display property of no utilize combined floats).

i simplified css code adding class both left divs , using 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; }

html css css3