csscss-multicolumn-layout

CSS: Force li's inside a column-count to not cut to a new column


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

Solution

  • demo - http://jsfiddle.net/victor_007/f8pufx7k/5/

    ol.columns > li{
        display:inline-block;
    }