CODEWITHSUNDEEP
htmlcss
Berny
Berny

Reputation: 155

How can I arrange content blocks like pinterest?

http://pinterest.com/ have a intresting structures of blocks. How I can make the same?

Now I have this code:
li {
float:left;
margin-right:10px;
}

And I get this result: http://imageshack.us/photo/my-images/339/49022374.png

But, I need this: http://imageshack.us/photo/my-images/197/86816998.png

Upvotes: 1

Views: 84

Answers (1)

Matanya
Matanya

Reputation: 6346

Why involving JS?

All you need is a number of floated column divs with inner divs

here is a simple fiddle

HTML

<div class="col">
   <div>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velitmentum vestibulum. Aenean faucibus nunc sed quam vehicula laoreet. Aliquam
</div>
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagitti</div>
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagitti
</div>
</div>
<div class="col">
    <div>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagittis nibh nulla eget purus. Nunc nec tellus massa. Cras sit amet tortor nec libero condimentum vestibulum. Aenean faucibus nunc sed quam vehicula laoreet. Aliquam
</div>
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagitti</div>
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagittis nibh nulla eget purus. Nunc nec tellus massa. Cras sit amet tortor nec libero condimentum vestibulum. Aenean faucibus nunc sed quam vehicula laoreet. Aliquam
</div>
</div>
<div class="col">
    <div>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante 
</div>
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagitti</div>
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis l
</div>
</div>
<div class="col">
    <div>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ant
</div>
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagitti</div>
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis li
</div>
</div>

​ CSS

.col {
width:20%;
    float:left;

}
.col div {
margin:10px;
    padding:5px;
    border:1px solid black;
}
​

Upvotes: 1

Related Questions