How to achieve float: top in CSS/HTML

Question

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.

enter image description here

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 div
{
    display: inline-block;
    vertical-align: text-top;
}

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

can you put some code...so we can work with and findout the solution — Anish, May 25 '11 at 10:50
It's two columns because the width of the parent box allows only two to fit. — Zach, May 25 '11 at 10:55
I want it to be 3 columns actually but that's not a problem as far as I see — Zach, May 25 '11 at 10:59

score 1 · Answer 1 · edited May 23 '17 at 10:00

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:

Thanks for this man, I'm trying it out. Will let you know how it turns out. — Zach, May 25 '11 at 11:36

score 0 · Answer 2 · answered May 25 '11 at 10:52

0

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

answered May 25 '11 at 10:52

Stefan Filip

1,791
3
15
25

How to achieve float: top in CSS/HTML

2 Answers2

Linked