html - Grouping elements in css and displaying one below other -

i need id3 displayed below id2 instead of being displayed on side?

how can accomplish in using css?

html

<div class="main" ></div> <div id="id1">im in div1</div> <div id="id2">im in div2</div> <div id="id3">im in div3</div> <div></div> 

css

#id1{     background-color:green;     width:30%;       height:200px;     border:100px;        float:left; }  #id2{     background-color:red;     width:20%;       height:100px;     border:100px;        float:left; }  #id3{     background-color:yellow;     width:10%;       height:300px;     border:100px;        float:left; } 

http://jsfiddle.net/w9xpp/

the best way not use floats. reason use them make things horizontal other things. if want things fit puzzle, @ masonry.js