Inhomogeneous mesh float

Question

Hi, I am trying to make a floating grid that has different shapes.

Here is my goal and what's going on: http://imgur.com/a/wXQfA

As you can see, there is a space under the horizontal figure. I am trying to fix this without using any kind of positioning in order to add boxes or move them later.

code: html

<li class="mediumBox"> <a href="#"><img src="..." height="205" width="430"></a> </li> <li class="largeBox"> <a href="#"><img src="..." height="430" width="430"></a> </li> <li class="verticleMediumBox"> <a href="#"><img src="..." height="430" width="205"></a> </li> <li class="smallBox"> <a href="#"><img src="..." height="205" width="205"></a> </li> <li class="smallBox"> <a href="#"><img src="..." height="205" width="205"></a> </li> <li class="smallBox"> <a href="#"><img src="..." height="205" width="205"></a> </li> <li class="smallBox"> <a href="#"><img src="..." height="205" width="205"></a> </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 is not like my chrome version.

Answer 1

Edit: Sorry, did not read the first time you need dynamic fields.

If the size of your columns is scaled (for example, some kind of responsive design), you need something that will dynamically set these absolute positions. Therefore you need javascript.

You can use jquery masonry or jquery isotope for this.

http://masonry.desandro.com/

http://isotope.metafizzy.co/

:)