2

I have dynamic data in divs like this: http://jsfiddle.net/rvWzr/

<div class="container">
<div style="width:200px;height:100px;">1</div>           
<div style="width:200px;height:300px;">2</div> 
<div style="width:200px;height:140px;">3</div> 
<div style="width:200px;height:210px;">4</div> 
<div style="width:200px;height:140px;">5</div> 
<div style="width:200px;height:120px;">6</div> 
</div>​

.container div{
display:inline-block;
border:1px solid black;
margin:0px 0px 20px 20px;
}​

On my screen it looks like this: enter image description here

but i would like it to look something like this in order to not waste space: enter image description here

How can i do that? Is there something like "float:left top;"?

Alex Schneider
  • 335
  • 1
  • 6
  • 17

1 Answers1

3

This feature is unfortunately inexistent. You could rewrite your code into columns, but I fear that this is not enough robust when resizing.

UPDATE

With Flexbox taking up steam (supported in all major browsers), there is at last an easy solution for the daring ones amongst us who do not fear leaving IE8/IE9 unsupported!

Flexbox - Guide

Flexbox - Support

If it's a badly needed feature and you need it now, I'd suggest you use a js-plugin that is doing this for you. I once used jq-masonry and was quite happy with it.

nirazul
  • 3,928
  • 4
  • 26
  • 46