Non uniform grid float - html

Question

Hey im trying to make a floating grid that has different shapes.
Here is my goal and whats happening: http://imgur.com/a/wXQfA
As you can see there is a gap under the horizontal piece. Im trying to fix it without having to use any positioning so that I can add boxes on later or move them around.
Code:
Html
<li class="mediumBox">
<img src="..." height="205" width="430">
</li>
<li class="largeBox">
<img src="..." height="430" width="430">
</li>
<li class="verticleMediumBox">
<img src="..." height="430" width="205">
</li>
<li class="smallBox">
<img src="..." height="205" width="205">
</li>
<li class="smallBox">
<img src="..." height="205" width="205">
</li>
<li class="smallBox">
<img src="..." height="205" width="205">
</li>
<li class="smallBox">
<img src="..." height="205" width="205">
</li>
</ul>
</div>
</body>
Css:
body{
background-color: #fffdf9;
height: 100%;
width: 100%;
}
#content{
background-color: red;
height: auto;
width: 900px;
margin: 5em auto 0 auto;
}
#work ul{
list-style: none;
}
#work li{
float: left;
margin: 10px;
}
#work li >a{
display: block;
}
#work li .smallBox{
float: left;
display: block;
}
#work li .mediumBox{
float: left;
display: block;
}
#work li .verticleMediumBox{
float: left;
display: block;
}
#work li .largeBox{
float: left;
display: block;
}
Here is my code:http://jsfiddle.net/jw7pV/
For some reason the jsFiddle version doesn't look like my chrome version.

Answer 1

Edit: sorry didn't read the first time that you need dynamic boxes.
If the size of your columns scales (like some kind of responsive design) then you need something that will set these absolute positions dynamically. So you need javascript.
For that you can use jquery masonry or jquery isotope.
http://masonry.desandro.com/
http://isotope.metafizzy.co/
:)