Display css columns in horizontal order instead of vertical

Question

I have this code:

<div id="columns">
    <div id="box1">box1</div>
    <div id="box2">box2</div>
    <div id="box3">box3</div>
    <div id="box4">box4</div>
    <div id="box5">box5</div>
    <div id="box6">box6</div>
</div>

The css:

.column {
column-count: 3;
column-gap: 0px;
column-fill: auto;
margin: auto;
}   

#box(n) {
display: inline-block;
padding: 0 10px;
margin: 10px 10px;
}

I'm getting:

box1 box4
box2 box5
box3 box6

What I want:

box1 box2
box3 box4
box5 box6

Can anyone help me how to do it with pure html/css? I'm trying to do it pinterest style(boxes with different heights).

Also you have `id's` in your HTML and `Class` selectors in CSS. — divy3993, Oct 19 '15 at 06:55
My be your expected output is different than what I understand. But getting the output as per structure of HTML, no need of columns properties. So why are you using column properties? — Sachink, Oct 19 '15 at 07:15
I want to showcase stacked boxes with different heights but with same margins. The same happens in pinterest. If I use span the space between the boxes will be different. I added a picture to show it better. — Henrique Braun, Oct 19 '15 at 14:23

score 2 · Answer 1 · answered Oct 19 '15 at 06:52

Try using float:

Demo: http://jsfiddle.net/GCu2D/912/

HTML

<div id="columns">
    <div id="box1">box1</div>
    <div id="box2">box2</div>
    <div id="box3">box3</div>
    <div id="box4">box4</div>
    <div id="box5">box5</div>
    <div id="box6">box6</div>
</div>

CSS:

#columns {
    width:400px; /* change it according to your design*/
}
#columns div {
    float:left;
    width:50%;/*so as to give equal width to div */
    outline:1px solid red;/*optional*/
    height:400px;/*use your own value*/
}
#columns:after {
    content:"";
    display:block;
    clear:both;
}

My boxes have different heights, they are not the same... Added a picture to show it better. — Henrique Braun, Oct 19 '15 at 14:24

Display css columns in horizontal order instead of vertical

1 Answers1