CSS3 columns ordered horizontally

Question

Morning,

Situation: I am using CSS3 Columns to have responsive columns for ordering some pins. The products in the columns will be ordered by rating (as you can see here: http://d.pr/i/iJPK ) horizontally. The first 3 get highlighted.

Problem: CSS3 Columns order vertically by default, and i see no option to change this. The ordering needs to be horizontally, so i can highlight the first 3 + the other are horizontally arranged. The height needs to be variable too (thats why i used css3 columns) What it looks like now in Chrome: http://d.pr/i/Vbqq

Fiddle of my situation: http://jsfiddle.net/VXsAU/43/ these items are ordered VERTICALLY, i need them ordered HORIZONTALLY.

Possible workarounds with jquery are accepted.

This is my html:

<div id="list_all_burgers">
        <div id="columns">
            <div class="top_3_header"></div>
            <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Sed feugiat consectetur pellentesque. Nam ac elit risus,
                        ac blandit dui. Duis rutrum porta tortor ut convallis.
                        Duis rutrum porta tortor ut convallis.
                    </p>
            </div>
            <div class="top_3_header"></div>
            <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Donec a fermentum nisi.
                    </p>
                </div>
            <div class="top_3_header"></div>
                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Nullam eget lectus augue. Donec eu sem sit amet ligula
                        faucibus suscipit. Suspendisse rutrum turpis quis nunc
                        convallis quis aliquam mauris suscipit.
                    </p>
                </div>

                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Nullam eget lectus augue. Donec eu sem sit amet ligula
                        faucibus suscipit. Suspendisse rutrum turpis quis nunc
                        convallis quis aliquam mauris suscipit.
                    </p>
                </div>

                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Donec a fermentum nisi. Integer dolor est, commodo ut
                        sagittis vitae, egestas at augue.
                    </p>
                </div>

                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Sed feugiat consectetur pellentesque. Nam ac elit risus,
                        ac blandit dui. Duis rutrum porta tortor ut convallis.
                        Duis rutrum porta tortor ut convallis.
                    </p>
                </div>

                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Nullam eget lectus augue. Donec eu sem sit amet ligula
                        faucibus suscipit. Suspendisse rutrum turpis quis nunc
                        convallis quis aliquam mauris suscipit.
                        Duis rutrum porta tortor ut convallis.
                    </p>
                </div>

                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Nullam eget lectus augue.
                    </p>
                </div>

                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Sed feugiat consectetur pellentesque.
                    </p>
                </div>

                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Donec a fermentum nisi. Integer dolor est, commodo ut
                        sagittis vitae, egestas at augue. Suspendisse id nulla
                        ac urna vestibulum mattis. Duis rutrum porta tortor ut convallis.
                    </p>
                </div>

                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Donec a fermentum nisi. Integer dolor est, commodo ut
                        sagittis vitae, egestas at augue. Suspendisse id nulla
                        ac urna vestibulum mattis.
                    </p>
                </div>

                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Sed feugiat consectetur pellentesque. Nam ac elit risus,
                        ac blandit dui. Duis rutrum porta tortor ut convallis.
                    </p>
                </div>

                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Donec a fermentum nisi. Integer dolor est, commodo ut
                        sagittis vitae, egestas at augue. Suspendisse id nulla
                        ac urna vestibulum mattis.
                    </p>
                </div>

                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Donec a fermentum nisi. Integer dolor est, commodo ut
                        sagittis vitae, egestas at augue. Suspendisse id nulla
                        ac urna vestibulum mattis.
                    </p>
                </div>

                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Sed feugiat consectetur pellentesque. Nam ac elit risus,
                        ac blandit dui. Duis rutrum porta tortor ut convallis.
                    </p>
                </div>
        </div>
    </div>
</div>

And this is my css: (sass notation)

#list_all_burgers{
  margin-top: 9px;
  margin-left: 15%;
  height: 500px;
  //background-color: rgba(yellow, .3);
  overflow: auto;

  #columns{
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 15px;
    column-fill: auto;

    .top_3_header{
      display: inline-block;
      background: url('../images/list/burger_name_pat.png') repeat-x;
      width: 100%;
      height: 36px;

      -webkit-column-break-inside: avoid;
      -moz-column-break-inside: avoid;
      column-break-inside: avoid;
    }

    .pin{
      display: inline-block;
      background-color: rgba(0,0,0, .05);
      margin-top: -2px;

      -webkit-box-shadow: inset 0 2px 3px rgba(0,0,0, .4);
      -moz-box-shadow: inset 0 2px 3px rgba(0,0,0, .4);
      box-shadow: inset 0 2px 3px rgba(0,0,0, .4);
      -moz-border-radius: 9px;
      border-radius: 9px;

      -webkit-column-break-inside: avoid;
      -moz-column-break-inside: avoid;
      column-break-inside: avoid;

      img{
        width: 100%;
        padding-bottom: 15px;
        margin-bottom: 5px;
      }
    }
  }
}

Hope this is what you are looking for. http://stackoverflow.com/questions/16692618/inline-block-divs-fill-table-cell-in-chrome-but-not-other-browsers — Nitesh, Jun 13 '13 at 09:15
http://stackoverflow.com/questions/12481337/flow-multi-column-elements-left-right-before-top-down — koningdavid, Jun 13 '13 at 09:19
http://jsfiddle.net/VXsAU/43/ This fiddle explains my situation. These items are ordered vertically, i want them ordered horizontally. — Warre Buysse, Jun 13 '13 at 09:21
koningdavid that could work indeed, but isn't there a possibility to do this with css3 columns? — Warre Buysse, Jun 13 '13 at 09:25
I'm afraid not, multi column is made for newsletters style (vertical). There is no option in CSS for horizontal alignment(yet). — koningdavid, Jun 13 '13 at 09:28
CSS column fills column one after each other. Exactly like a newspaper. What you need is the use of display:inline-block and eventually factice column as to draw background — G-Cyrillus, Jun 13 '13 at 09:28
Problem with that GCyrillus, koningdavid is that my items with different heights don't float under each other. like this: http://jsfiddle.net/HepsX/ — Warre Buysse, Jun 13 '13 at 09:35
float is as well not appropriate to align in row each item. @Ware Buysse ,I updated jsfiddle in my answer with different height + inline-block : http://jsfiddle.net/GCyrillus/VXsAU/44/ — G-Cyrillus, Jun 13 '13 at 09:51

G-Cyrillus · Answer 1 · 2013-06-13T09:49:11.477

0

Column CSS is not appropriate for the result you wish.
You can look for display:inline-block and text-align:justify.
http://jsfiddle.net/VXsAU/43/

ul.newslist {
    width:98%;
    background-color: #ccc;
    padding: 16px 1% 0;
    list-style: none;
    text-align:justify;
}
ul.newslist:after {/* to justify last line too, add a virtual-one */
    content:'';
    display:inline-block;
    width:100%;
}
ul.newslist > li {
    border-top: 1px solid #000;
    display:inline-block;
    width:21%;
}
ul.newslist > li > a {
    display: block;
    padding: 4px;
    background-color: #f6b;
    text-decoration: none;
    color: inherit;
}

EDIT: with itel different height: http://jsfiddle.net/GCyrillus/VXsAU/44/

edited Jun 13 '13 at 09:49

answered Jun 13 '13 at 09:35

G-Cyrillus

101,410
14
105
129

Doesn't do the trick. The items are still ordered vertically. Found a solution in Masonry JS. :) – Warre Buysse Jun 13 '13 at 09:38
Wich browser ? I see them clearly going from 0 to 3 on first line, then , 3 to 6 on next line and so on. – G-Cyrillus Jun 13 '13 at 09:54
Oh yes, was looking at the wrong fiddle. Still the items can't have a different height and order up under each other (pinterest-alike, you know what i mean..) – Warre Buysse Jun 13 '13 at 10:06

score 0 · Accepted Answer · answered Jun 13 '13 at 09:36

0

Found a solution (hurray)

Masonry JS library did the trick for me. MasonryJS link

answered Jun 13 '13 at 09:36

Warre Buysse

1,335
4
21
39

CSS3 columns ordered horizontally

2 Answers2