CODEWITHSUNDEEP
htmlcss
Patrick Muff
Patrick Muff

Reputation: 33

Floating DIVs like on pintrest.com

I've got a little problem. I have multiple relative positioned DIVs in an absolute positioned wrapper div. Now I want them to be like on pintrest.com. But my result looks like this:

http://d.pr/CHCq (Image link on droplr.com)

CSS:

div.post {
position: relative;
width: 250px;
margin: 0 0px 14px 14px;
background-color: #eae9e9;
float: left;
}

Do you know any efficient fix for this? Or shall I make three columns? Thanks in advance.

Upvotes: 1

Views: 529

Answers (3)

James Montagne
James Montagne

Reputation: 78690

You might consider using jquery masonry. Or, if you're alright with the width being static, 3 columns as you mentioned.

Upvotes: 0

Samir Adel
Samir Adel

Reputation: 2499

I suggest that you do the 3 columns as it will be the fastes solution for your issue and it will be effective as well.

Upvotes: 1

Joshua
Joshua

Reputation: 3603

You will need to split them up into columns using either DIVs or TABLEs, and then make sure you have "vertical-align: top" set on the column containers.

Float won't do what you're wanting, nor will display: inline-block.

One alternative is to set the height of all boxes to be equal, and then use "display: inline-block" instead of float.

Upvotes: 1

Related Questions