Layout (float) different height blocks with css

Question

I have such div, with such html, as here:

and little css:

#manufacturers-list{
  width: 690px;
  height: 980px;
  max-height: 980px;
  margin: 10px 0 0 0;
  .man-area{
    margin: 6px 0 0 6px;
    width: 210px;
    float: left;
    ul, li{
      margin: 0;
      padding: 0 0 0 1px;
      list-style-type: none;
    }
    ul{
      padding: 0 0 0 10px;
    }
  }
  // *:nth-child(3n+1) {
  //    clear: both;
  // }
}

And in schema it looks so (left where i have red cross):

enter image description here

so everything is floated, but new element-line is only, after most max height block as in schema, but i need to style so, that blocks are floated without mind of max height block in line, how could i do this without js? only with css?

checkout this post - http://stackoverflow.com/questions/12117195/masonry-style-layout-only-with-css — Evgeniy, Mar 27 '14 at 06:50
ops, sorry then this example - http://sickdesigner.com/masonry-css-getting-awesome-with-css3/ — Evgeniy, Mar 27 '14 at 06:58
@Evgeniy lol, didn't know why, but without js is working too ) — brabertaser19, Mar 27 '14 at 07:00

score 1 · Accepted Answer · answered Mar 27 '14 at 07:03

1

chekout this post

HTML

<div>
    <a href="#">Whatever stuff you want to put in here.</a>
    <a href="#">Whatever stuff you want to put in here.</a>
    <a href="#">Whatever stuff you want to put in here.</a>
</div>

CSS

div{
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
    width: 480px;
}

div a{
    display: inline-block;
    margin-bottom: 20px;
    width: 100%;
}

answered Mar 27 '14 at 07:03

Evgeniy

2,915
3
21
35

this is really great CSS3 feature, I've tried this before but unfortunately this is not browser compatible. but no idea using .js file it will works – Kheema Pandey Mar 27 '14 at 07:34

Layout (float) different height blocks with css

1 Answers1

Linked