html - Pin-board effect with CSS -

take @ fiddle

i want div 4 higher it's closer div 1, margins intact, sort of pinterest pin-board style layout, know how that?

html:

<div>1<br/>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> 

css:

div {   display:inline-block;   background-color:#ccc;   float:left;   width:200px;   margin:10px 20px; }  body { width:500px; } 

div 4 doesn't fit in snuggly rest. see fiddle details.

what want this link provided j08691 in answer below.

you can pinterest layout in most current browsers using css multi-column layouts, break in ie9 , older versions.

here's jsfiddle. have added more div's demonstration purposes.

html, body {     height: 100%; } body {     width: 420px;     -webkit-column-count: 2;     -webkit-column-gap: 20px;     -moz-column-count: 2;     -moz-column-gap: 20px;     column-count: 2;     column-gap: 20px;     margin: 20px; } div {     display: inline-block;     background-color:#ccc;     width:200px;     margin-bottom: 20px; } 

the width of body set 420px, value derived twice width of div + width of column gap, play value , column gap value add more or less space between columns of div's.

if need support older browsers, have @ columnizer jquery plugin.