CSS3 multi-column list

2 Views

I’ve been using CSS3 multi-column for a few WordPress sites now and one thing that I find excepteble but still something I want to know how to fix is that if I put a list(with sub items) in the collumns that it won’t keep the structure of the list

To make myself clear this is the HTML:

Read More
<div>
<ul>
   <li>
      List-item
      <ul>
         <li>Sub-list-item</li>
         <li>Sub-list-item</li>
      </ul>
   </li>
   <li>
      List-item
      <ul>
         <li>Sub-list-item</li>
         <li>Sub-list-item</li>
      </ul
   </li>
</ul>
</div>

And the CSS would be: 

div{
-webkit-column-count:3;   
    -moz-column-count:3;
    -ms-column-count:3;
    -o-column-count:3;
    column-count:3;
    -webkit-column-gap:15px;   
    -moz-column-gap:15px;
    -ms-column-gap:15px;
    -o-column-gap:15px;
    column-gap:15px;
    columns:3;
}

And this is what you get:

enter image description here

This is nice because it makes it possible in WordPress to show menu’s like this.
But one thing that bugs me is that it places the Sub-list-items in the next column while the parent of that item is in the previous column.

Is this fixable?

Before anyone says: why don’t you just make multiple lists and make your own columns(this was the suggestion when I asked the question how to do this) this is for a dynamic WordPress menu so I have no controll over how many items are in the menu.

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. Making your parent <li> display: inline-block; seems to “fix” this:

    Here is a demo http://jsfiddle.net/DczVL/1/

    ul {
    list-style: none;
    margin:0;
    padding:0;
}
ul > li {
    display: inline-block;
    width: 100%;
}
ul > li > ul >li {
    color: red;
}
div {
    -webkit-column-count:3;
    -moz-column-count:3;
    -ms-column-count:3;
    -o-column-count:3;
    column-count:3;
    -webkit-column-gap:15px;
    -moz-column-gap:15px;
    -ms-column-gap:15px;
    -o-column-gap:15px;
    column-gap:15px;
    columns:3;
}
    <div>
    <ul>
        <li>List-item
            <ul>
                <li>Sub-list-item</li>
                <li>Sub-list-item</li>
            </ul>
        </li>
        <li>List-item
            <ul>
                <li>Sub-list-item</li>
                <li>Sub-list-item</li>
                <li>Sub-list-item</li>
                <li>Sub-list-item</li>
            </ul>
        </li>
         <li>List-item
            <ul>
                <li>Sub-list-item</li>
                <li>Sub-list-item</li>
                <li>Sub-list-item</li>
                <li>Sub-list-item</li>
            </ul>
        </li>
    </ul>
</div>