I think I found a #Firefox bug. Bug 822053 "list breaks within nested columns"
The layout works fine in Safari. Can anyone suggest a work-around to get it working in FireFox?
I have a CSS3 2-column div within a box div that is nested within a CSS3 2-column div. The nested-column contains a ul list. The list is breaking within the nested column.
I pasted the 2-column box-with-list outside of the containing 2-column div. It works outside of the first 2-column containing div.
I have created an example here: http://www.craigwebbart.com/ga/bugzilla.htm
The example of what a working box looks like is to the left. The broken nested 2-column box with list is to the right.
The example on the left is what I'm aiming for. I need the 2-column elements to revert to 1-column using media queries at smaller sizes. This works fine in Safari 5.0.6.
Please let me know if this bug exists in newer versions of Firefox. Mine is 16.0.2 and please also alert me to a work-around or patch-fix. Thanks!