How to float div's with variable heights at same distance: Solution without Masonry?

Question

How to position floating div's with fixed widths but variable heights at the same vertical distance of each other?

Similar questions like this have been asked a lot and almost always is the answer use masonry: http://masonry.desandro.com/

Masonry is a good solution, but masonry does more than needed.

What would be a simple jquery/css solution which doesn't require a library like masonry or packery (http://packery.metafizzy.co/)?

Problem:

Intended result:

Images are from this questions: Floating divs with variable height

Related questions:

CSS Floating Divs At Variable Heights

Floating divs with variable height

Example HTML:

<style>
    #wrapper {
        width: 400px;
        overflow: hidden;   
    }

    .block {
        width: 180px;
        float: left;
        background-color: green;
        margin: 5px;

    }
</style>

<div id="wrapper">
    <div class="block" style="height:100px;">
    </div>
    <div class="block" style="height:200px;">
    </div>
    <div class="block" style="height:140px;">
    </div>
    <div class="block" style="height:70px;">
    </div>
    <div class="block" style="height:120px;">
    </div>
    <div class="block" style="height:170px;">
    </div>
</div>

I think unless you're willing to restrict the boundaries of your question quite a bit, your answer is going to be the same as the already asked questions which are basically duplicates. — Evan Knowles, Feb 04 '15 at 06:11

score 1 · Answer 1 · answered Feb 04 '15 at 06:12

1

For modern browsers that support CSS columns, you can use this technique posted by Radu Chelariu on Sick Designer.

You can configure the #wrapper element to have 3 columns like this:

#wrapper {
    -moz-column-count: 3;
    -moz-column-gap: 5px;
    -webkit-column-count: 3;
    -webkit-column-gap: 5px;
    column-count: 3;
    column-gap: 5px;
    width: 400px;
}

#wrapper div.block {
    display: inline-block;
    /* Display inline-block, and absolutely NO FLOATS! */
    margin-bottom: 20px;
    width: 100%;
}

answered Feb 04 '15 at 06:12

Cafe Coder

944
9
14

1

That would work if to forget about order of elements. – c-smile Feb 04 '15 at 06:18
@c-smile Good point. The ordering of the child elements would be different from a masonry implementation. – Cafe Coder Feb 04 '15 at 06:20

score 1 · Answer 2 · answered Feb 04 '15 at 06:15

1

Without js, there is one CSS3 way you can implement it using CSS3 Columns like column-count, column-gap.

Check out the link, http://cssdeck.com/labs/css-only-pinterest-style-columns-layout

answered Feb 04 '15 at 06:15

Muthu Kumaran

17,682
5
47
70

Thanks, but JS or jquery is not a problem, I was looking for something smaller than the 25kb of masonry. Great simple solution, although browser support and the order of the content might give some trouble. – coder Feb 04 '15 at 06:26
1

for jquery plugin, try this which is smaller file size http://www.inwebson.com/jquery/blocksit-js-dynamic-grid-layout-jquery-plugin/ – Muthu Kumaran Feb 04 '15 at 06:31
That's really a small plugin. Great answer! – coder Feb 04 '15 at 06:37

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

0

Try to use 'inline-block' and 'vertical-align' for div's

.block {
    display: inline-block;
    vertical-align: top;
    width: 180px;
    background-color: green;
    margin: 5px;
}

http://jsfiddle.net/g4vm5cpu/

Your block will behave like inline elements

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 04 '15 at 06:54

mashi

532
3
6

The space problem is the same as with the floating blocks. – coder Feb 04 '15 at 07:04
Yes, but block are arranged in strict lines. If you wont fixed vertical space between blocks, I think the best way is to go with column solution – mashi Feb 04 '15 at 07:33

score 0 · Answer 4 · answered Feb 04 '15 at 07:15

In Sciter this can be done as

<html>
  <head>
    <title></title>
    <style>

    #wrapper {
        width: 400px;
        flow: "1 2 3"   
              "1 4 3";
    }

    .block {
        width: 180px;
        background-color: gold;
        margin: 5px;
    }    

    </style>

  </head>
<body>

  <div id="wrapper">
    <span class="block" style="height:160px;">1</span>
    <span class="block" style="height:100px;">2</span>
    <span class="block" style="height:240px;">3</span>
    <span class="block" style="height:200px;">4</span>
  </div>

</body>
</html>

as it supports flow:"template" among other layout managers.

That above is rendered as enter image description here

In conventional browsers, without support of module grid that's not viable without JS.

How to float div's with variable heights at same distance: Solution without Masonry?

4 Answers4