I'm trying to force the li.key to not wrap to a new column. I want a new li.key to start at the top of each column. Here's a JS Fiddle.
Is this possible without the use of JS?
<ol class="columns">
<li class="key">A
<ol>
<li>Alcoholic beverage, wine, table, white, Fume Blanc</li>
<li>Alcoholic Beverage, wine, table, red, Cabernet Franc</li>
<li>Apples, raw, red delicious, with skin</li>
</ol>
</li>
<li class="key">B
<ol>
<li>Buckwheat groats, roasted, dry</li>
<li>Babyfood, vegetables, carrots, junior</li>
<li>Beef, round, knuckle, tip center, steak, separable lean and fat, trimmed to 0" fat, all grades, raw</li>
<li>Bagels, plain, unenriched, with calcium propionate (includes onion, poppy, sesame)</li>
<li>Babyfood, juice, mixed fruit</li>
<li>Beef, short loin, top loin, separable lean and fat, trimmed to 1/8" fat, prime, cooked, broiled</li>
<li>Beef, rib eye steak, boneless, lip off, separable lean and fat, trimmed to 0" fat, select, raw</li>
<li>Babyfood, dinner, beef noodle, strained</li>
<li>Beef, shoulder steak, boneless, separable lean and fat, trimmed to 0" fat, select, cooked, grilled</li>
<li>Beef, brisket, flat half, separable lean only, trimmed to 1/8" fat, select, cooked, braised</li>
<li>Beef, ground, 90% lean meat / 10% fat, crumbles, cooked, pan-browned</li>
<li>Beef, rib eye steak, boneless, lip off, separable lean only, trimmed to 0" fat, select, raw</li>
<li>Beef, shoulder top blade steak, boneless, separable lean and fat, trimmed to 0" fat, all grades, cooked, grilled</li>
<li>Beef, round, tip round, roast, separable lean only, trimmed to 0" fat, all grades, cooked, roasted</li>
</ol>
</li>
<li class="key">C
<ol>
<li>Crackers, melba toast, plain</li>
<li>Chicken, feet, boiled</li>
<li>Candies, fudge, vanilla with nuts</li>
<li>Cereals ready-to-eat, MALT-O-MEAL, Apple ZINGS</li>
<li>Cherries, sweet, canned, pitted, heavy syrup pack, solids and liquids</li>
<li>Chicken, dark meat, thigh, meat only, enhanced, raw</li>
<li>Cereals ready-to-eat, GENERAL MILLS, FIBER ONE 80 Calories, Honey Squares</li>
<li>Candies, caramels, chocolate-flavor roll</li>
<li>Cereals ready-to-eat, KASHI GOLEAN CRUNCH!</li>
<li>Cheese, pasteurized process, pimento</li>
<li>Chicken, skin (drumsticks and thighs), enhanced, raw</li>
</ol>
</li>
<li class="key">D
<ol>
<li>Dates, deglet noor</li>
</ol>
</li>
<li class="key">F
<ol>
<li>Fast foods, french toast sticks</li>
<li>Fish, eel, mixed species, cooked, dry heat</li>
<li>Formulated bar, MARS SNACKFOOD US, SNICKERS Marathon Energy Bar, all flavors</li>
</ol>
</li>
<li class="key">G
<ol>
<li>Gelatin desserts, dry mix, prepared with water</li>
</ol>
</li>
<li class="key">I
<ol>
<li>Infant formula, ABBOTT NUTRITION, SIMILAC, ISOMIL, with iron, liquid concentrate (formerly ROSS)</li>
</ol>
</li>
<li class="key">K
<ol>
<li>Kale, scotch, cooked, boiled, drained, with salt</li>
</ol>
</li>
<li class="key">L
<ol>
<li>Lamb, Australian, imported, fresh, loin, separable lean and fat, trimmed to 1/8" fat, cooked, broiled</li>
</ol>
</li>
<li class="key">M
<ol>
<li>Mollusks, clam, mixed species, raw</li>
</ol>
</li>
<li class="key">P
<ol>
<li>Pork, fresh, loin, center rib (chops), boneless, separable lean only, cooked, braised</li>
<li>Pork, fresh, carcass, separable lean and fat, raw</li>
<li>PREGO Pasta, Zesty Mushroom Italian Sauce, ready-to-serve</li>
<li>Pears, raw, red anjou</li>
</ol>
</li>
<li class="key">S
<ol>
<li>Soy protein isolate, potassium type, crude protein basis</li>
<li>Stew, mutton, corn, squash (Navajo)</li>
<li>Snacks, granola bars, soft, uncoated, nut and raisin</li>
<li>Salad dressing, blue or roquefort cheese dressing, light</li>
<li>Squab, (pigeon), meat only, raw</li>
</ol>
</li>
<li class="key">T
<ol>
<li>Tangerine juice, frozen concentrate, sweetened, diluted with 3 volume water</li>
</ol>
</li>
<li class="key">V
<ol>
<li>V8 V. FUSION Juices, Strawberry Banana</li>
<li>Veal, shoulder, whole (arm and blade), separable lean only, cooked, braised</li>
</ol>
</li>
<li class="key">W
<ol>
<li>Whale, beluga, eyes (Alaska Native)</li>
</ol>
</li>
</ol>
CSS:
.columns {
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
margin-top:5px;
-webkit-column-gap:40px;
-moz-column-gap:40px;
column-gap:40px;
-webkit-column-fill:balance;
-moz-column-fill:balance;
column-fill:balance;
overflow:hidden;
}
ol { font-size:0 }
li { font-size:14px }
.key > ol {
margin-top:5px;
margin-bottom:15px
}
Desired outcome: (See how the letters are at the top of each column.)
Col 1 Col 2 Col 3
A P Y
-item -item -item
-item -item -item
-item
Q
H -item
-item -item
demo - http://jsfiddle.net/victor_007/f8pufx7k/5/
ol.columns > li{
display:inline-block;
}