[Solved] Pin-board effect with CSS [closed]

by


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.

1

solved Pin-board effect with CSS [closed]