Control Freak Control Freak - 24 days ago 11
CSS Question

Pin-board effect with CSS

Take a look at this fiddle

I want div

4
to be higher so it's closer to div
1
, but with the margins intact, sort of like the Pinterest pin-board style layout, does anyone know how to do 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 like the rest. See the fiddle for details.

What I want is something like this link provided by j08691 in an answer below.

Answer

You can do something like the Pinterest layout in most current browsers using CSS multi-column layouts, it will break in IE9 and older versions.

Here's a jsFiddle. I have added some more div's for 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 the body is set to 420px, that value is currently derived from twice the width of a div + the width of the column gap, you could play with this value and the column gap value to add more or less space between the columns of div's.

If you need to support older browsers, you could have a look at the Columnizer jQuery Plugin.