CODEWITHSUNDEEP
csshtml
Alex Schneider
Alex Schneider

Reputation: 355

div float or display inline-block to left AND top

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;"?

Upvotes: 2

Views: 1715

Answers (1)

nirazul
nirazul

Reputation: 3955

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.

Upvotes: 3

Related Questions