0

Most of the time I find my coding answers on stackoverflow, but not this time. Can you help?

I have a container with DIV's in it, which are fixed width and variable height. They are inline-block, floating to left. But on a new line I can't get these DIV's to move upwards as much as possible.

This is my code: I want DIV 5 to be align just under DIV 1.

<div class="container">
    <div class="s">1</div>
    <div class="m">2</div>
    <div class="l">3</div>
    <div class="m">4</div>
    <div class="s">5</div>
    <div class="m">6</div>
    <div class="l">7</div>
    <div class="m">8</div>
</div>

.container {
    width: 600px;
    border: 1px solid black;
}
.container > div {
    width: 125px;
    border: 1px solid green;
    display: inline-block;
    float: left;
    margin: 5px;  
}
.container > div.s { height: 100px; }
.container > div.m { height: 125px; }
.container > div.l { height: 160px; }

See my problem here: https://jsfiddle.net/djabt6oo/

I could use 3 column DIV's but that not really an option in my situation. Is there a CSS solution?

D-org
  • 1
  • 1
    Not possible with pure CSS. This is called a **Masonry** layout. – Aziz May 02 '16 at 11:36
  • Chk this one - http://stackoverflow.com/questions/5234749/css-floating-divs-at-variable-heights – Sharon May 02 '16 at 11:41
  • Actually could be done with `Flexbox` - https://jsfiddle.net/azizn/w6yhoL7v/1/ but this will require setting a fixed height.. hmm not that *flexible* (pun intended) and I'm not sure about support. This technique was answered by [@Oriol](http://stackoverflow.com/a/35097136/877671) – Aziz May 02 '16 at 11:50

0 Answers0