css-multicolumn-layout

I'd like to create a multi column list like this: https://jsfiddle.net/37dfwf4u/ No problem when using a different list for each column: <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> </ul> <ul> <li>item5</li> <li>item6</li> <li>item7</li> <li>item8</li> </ul> ul { display:inline-block; } However, can this be done by a continuous list and pure CSS so that the CSS arranges the columns automatically? E.g. by use of flex layout which I'm not yet familiar with? Yes, you can create a multi column list as described if you make the ul a flex container, change the flex-direction to

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: <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

I have a text splitted in 4 columns and it works perfectly in Safari I don't know why I can see just 2 columns in Google Chrome. Tested with Chrome 55.0.2883.95 (64-bit) Any help would be greatly appreciated. #people{ -webkit-column-count:4; -moz-column-count:4; column-count:4; -webkit-column-gap:.5em; -moz-column-gap:.5em; column-gap:.5em; padding-bottom:2px; font-size:18px; line-height:21px; } .keeptogether{ display:inline-block; width:100% } <div id=people> <div class=keeptogether> A<br> fhdjsklfhs<br> fhdjsklfhs<br> fhdjsklfhs<br> fhdjsklfhs<br> fhdjsklfhs<br> fhdjsklfhs<br> fhdjsklfhs<br>

When using column-count in a wrapper, and the containers in the wrapper have border-radius applied, and content in the container is overflowing, the content completely disappears in all the columns, except the first one. Here is my example: https://jsfiddle.net/f4nd7tta/ The red semi-circle is only visible in the first column, why? #main_wrap{ width:100%; border:solid 1px black; -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; } #main_wrap > div{ border-radius:5px; overflow:hidden; position:relative; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; column

I am building a menu system presented to the user in multi-column format. The column-count property in CSS3 gets me 90% of the way there, but I'm having difficulties with alignment under Chrome. The menu is relatively simple: an unordered list divided into multiple-columns by the column-count property columns should fill sequentially, so column-fill: auto menu items are represented as list items each list item has a a clickable anchor tag, extended fully via display: block The alignment issue I'm having is most noticeable with a top-border and some background coloring on each list item. In

I have a flex-box problem. Can anyone point me in the right direction? It might even be that flex-box cannot solve this situation because of the way it works. I want to display content across 4 columns. Have the content be listed in a columnar format and wrap to the next column when running out of room. display: flex; flex-direction: column; flex-wrap: wrap; height:<##>px should take care of this. But this is where things get tricky. What if I don't want a fixed height, but one that grows/shrinks based on the length of the content? Have the container's height be dynamic. Like in Case B, the