Two column horizontal flow with CSS
I want to achieve a stream of DIVs similar to this:
Where divs go from left to right and top to bottom.
If I try to floats, 3 starts at the height where 2 ends ... So I'm wondering ... Is there a way to do this with CSS?
Edit: Since I am getting divs from the database using PHP, I cannot just move 2 to 3 or something like that.
Edit: The height and number of divs are also variable.
source to share
demo - http://jsfiddle.net/auhgk0jq/
use column
and set inline-block
for the div inside the parent so it doesn't leave the part
.cont {
-webkit-column-count: 2;
/* Chrome, Safari, Opera */
-moz-column-count: 2;
/* Firefox */
column-count: 2;
width: 100%;
-webkit-column-gap: 10px;
/* Chrome, Safari, Opera */
-moz-column-gap: 10px;
/* Firefox */
column-gap: 10px;
}
.cont div {
width: 100%;
height: 150px;
margin: 4px 0;
display: inline-block;
vertical-align: top;
background: cornflowerblue;
}
.cont .two,
.cont .six {
height: 90px;
}
<div class="cont">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
</div>
source to share
I don't think this can be achieved using positions relative
. To do this, you need to specify a absolute
position for your divs.
The heights are variable in the example below. and you can add any number of divs, but you need to define a style for each one.
Check out a live example here .
source to share
This is not the correct answer to my question, but the workaround I did to solve it:
There are Javascript solutions for this like Wookmark and Masonry . I used it later and it does exactly what I wanted with minimal configuration.
I'm still interested in a pure CSS solution (and was surprised that it's not that easy to do with CSS), so I guess I'll leave this question open.
source to share