Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS multi-column layout of list items doesn't align properly in Chrome
    text
    copied!<p>I am building a menu system presented to the user in multi-column format. The <em>column-count</em> property in CSS3 gets me 90% of the way there, but I'm having difficulties with alignment under Chrome.</p> <p>The menu is relatively simple:</p> <ul> <li>an unordered list divided into multiple-columns by the <strong>column-count property</strong></li> <li>columns should fill sequentially, so <strong>column-fill: auto</strong></li> <li>menu items are represented as list items</li> <li>each list item has a a clickable anchor tag, extended fully via <strong>display: block</strong></li> </ul> <p>The alignment issue I'm having is most noticeable with a top-border and some background coloring on each list item. In Firefox, the list items are always aligned cleanly across each column, never bleeding into the previous/next column. In Chrome, alignment is a crapshoot, varying with how many list items are present and any padding/margin properties.</p> <p>I've posted the code for a simple test case here: <a href="http://pastebin.com/Ede3JwdG" rel="noreferrer">http://pastebin.com/Ede3JwdG</a></p> <p>The problem should be immediately evident: in Chrome, the first list item in the second column bleeds back into the first column. As you remove list items (click on them), you can see that alignment breaks down further.</p> <p>I've tried tweaking the padding/margin for the list items to no avail: Chrome appears to have a flawed algorithm for how it flows content across a multi-column layout.</p> <p>The primary reason I haven't ditched column-count altogether (in favor of manual generation/Columnizer/etc.) is that the menu system also involves drag-and-drop functionality across multiple sub-menus, and having the menu data laid out as a cohesive list-based hierarchy makes for clean code.</p> <p>Is there a way to fix the alignment issue in Chrome or should I just give up on <em>column-count</em> for now?</p> <p>ADDED:</p> <ul> <li>jsFiddle prototype: <a href="http://jsfiddle.net/VXsAU/" rel="noreferrer">http://jsfiddle.net/VXsAU/</a></li> <li>JS Bin prototype: <a href="http://jsbin.com/ebode5/" rel="noreferrer">http://jsbin.com/ebode5/</a></li> </ul>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload