How can I make a container layout like this?

StackOverflow https://stackoverflow.com/questions/22627369

  •  20-06-2023
  •  | 
  •  

Question

I tried to make a container that repeat the panel of posts again and again such blogs but I can't make the spaces disappear.

So the picture will show what I need.

Pic 1:
enter image description here

Pic 2: http://i.stack.imgur.com/vNpGp.png

As images show, I need to remove spaces from pic 1 and can't do it.

Please give me an HTML with CSS file to make like the second image.

Was it helpful?

Solution

You can use some jQuery plugins for this.
For example mansonry or isotope.
I think an css only solution will not work.

Maybe with display: table, display:table-cell this also works with css.

OTHER TIPS

<style type="text/css">
ul {float: left; width: 430px; padding: 0 14px 0 0; list-style: none}
ul li{color: #fff; background:#333; min-height: 155px; margin: 0 0 7px 0}

.first{height: 318px}
.last{height: 590px}
</style>

<body>

<ul>
    <li class="first">Your content here</li>
    <li>Your content here</li>
    <li>Your content here</li>
</ul>
<ul>
    <li>Your content here</li>
    <li>Your content here</li>
    <li>Your content here</li>
    <li>Your content here</li>
</ul>
<ul>
    <li class="last">Your content here</li>
</ul>

</body>

http://jsfiddle.net/tS3Wr/

This will help you

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top