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 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.
I've posted the code for a simple test case here: http://pastebin.com/Ede3JwdG
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.
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.
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.
Is there a way to fix the alignment issue in Chrome or should I just give up on column-count