0

EXAMPLE: http://jsfiddle.net/BpYZn/

Here is was I want to get: http://www.akinyapin.com/

Depending on the browser size the divs realign from 3 per row to 5 per row(maybe more, my screen is 1366 × 768, can't check).

I tryed just making the div elements to align with the float attribute. It works partially, they shrink to 3 per row depending on browser size but they wont "stick" to each other. There are big gaps between the divs in different rows.

The second website uses the "position:absolute". Is there a script for that kind of thing that anyone knows maybe?

This is the div's css

.box1{
padding:7px;
position:relative;
margin:1px;
background-color:white;
width:230px;
min-height:200px;
float:left;
-webkit-border-radius: 2px;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
SAD
  • 57
  • 8
  • 1
    You need [Masonry](http://masonry.desandro.com/) or [Isotope](http://isotope.metafizzy.co/) for that – Zoltan Toth Nov 02 '12 at 18:56
  • possible duplicate of [how to replicate pinterest.com's absolute div stacking layout](http://stackoverflow.com/questions/7109362/how-to-replicate-pinterest-coms-absolute-div-stacking-layout) – Zoltan Toth Nov 02 '12 at 18:58
  • not a duplicate because I have no idea what pinterest is :) – SAD Nov 02 '12 at 20:29

1 Answers1

2

The website uses a javascript plugin called Masonry which is doing the stacking divs magic. I don't see this effect being accomplished with pure css.

Jan
  • 5,688
  • 3
  • 27
  • 44