How to achieve float: top in CSS/HTML

If you can read the Headings ... one's called JWT, the other Alela Diane.. how do I get "Alela Diane" to fill up the space between them ( no puns intended )

The CSS property for these div's is set to display: inline-block.

The HTML - >

<div id="shastra_display">

<div class="shastra_post">
  There are multiple div's like this containing the Alela Diane's and JWT's etc.
</div> 

</div>

The CSS - >

#shastra_display
{
    width: 880px;
}

#shastra_display d开发者_如何学Goiv
{
    display: inline-block;
    vertical-align: text-top;
}

.shastra_post
{
    width: 270px;
    background-color: light-grey;
}

---

Is it always going to be just two columns? – thirtydot

It's two columns because the width of the parent box allows only two to fit. – Zach

So, the number of columns changes depending on the browser width.

That means you can't "cheat" and do it like this (as suggested by @Stefy):

• http://jsbin.com/atimu4

Other than a fixed number of columns, CSS can't do it. See this answer for a comparision of the ideas:

• CSS Floating Divs At Variable Heights

You will have to use JavaScript. There's already a convienient jQuery plugin: jQuery Masonry

Some interesting demos:

• http://masonry.desandro.com/demos/animating-jquery.html
• http://masonry.desandro.com/demos/adding-items.html

---

You should probably use a 2-column template in order to display the items properly.