HOW TO Recover spaces in between Divisions

Good morning friends after one week am interested to post a post but i think it will be more useful to u for example u are going to design a timeline like facebook or something while writing matter in divisions some may be small ,some may be big spaces may occur like below pic

Coming to coding just 

HTML CODE FOR divisions:

<div id="container">


<div class="box">1</div>
<div class="box">siddhu vydyabhushana<br>
siddhu vydyabhushana<br>siddhu vydyabhushana<br>siddhu vydyabhushana<br>siddhu vydyabhushana<br>siddhu vydyabhushana<br>siddhu vydyabhushana<br>
              				  </div>		  
<div class="box">3</div>
<div class="box">4 </div>
				  
</div>

CSS CODE 

#container
{
width:1100px; 
margin: 0 auto;
border:dashed 1px #bdbdbd;
padding:15px;
 }
.box{
width: 400px;
float: left;
background-color:#ffffff;
padding:10px;
font-family:Articulate Light;
background:#3388bb;
border:solid 1px #B4BBCD;
min-height:50px;
}
.box:hover
{
border:solid 1px black;
background:#3399cc;
border-radius:4px;
box-shadow:3px 3px 3px 3px #666;
-webkit-box-shadow :ease-in-out 0.30;
}

it will be recovered by jQuery library is MASONRY   download it from 

 Masonry jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<script type="text/javascript" >
$(function()
{

$('#container').masonry({boxSelector : '.box'});
});
</script>

After apply these the the pic will be