Question

Is it possible using a standard unordered list with a fixed height, to have overflowing elements flow into the next column.

Essentially I’m trying to achieve a magazine style layout where each article is stacked vertically.

Example code at http://jsfiddle.net/uDAJy/1/

I would expect the list items numbered 2, to be in the next column.

Thanks

Ben

Solution

I’m going to go down the CSS3 route that @Sime posted where possible.

For IE:

As the articles on the page are variable widths I couldn’t find a clean solution without doing some server side programming.

This involved first calculating the number of items per column (forgive the c#):

int itemsPerColumn = Model.Posts.Count / 5; // 5 columns on our page

if (Model.Posts.Count % 5 > 0) {
    itemsPerColumn++; // so 8 articles would yield 2 per column
}

We then loop through each article and increment a counter.

If i % itemsPerColumn == 0 we create an opening column div.

After rendering the item we check if (i + 1) % itemsPerColumn == 0 and if so render a closing column div.

Then we increment the counter.

Not quite as nice as the CSS3 solution but it works 🙂

Answer 1

Here you go:

HTML:

<div class="wrapper">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
    </ul>
</div>

CSS:

.wrapper { 
    border:2px solid red;
    height:604px;
    width:464px;
    padding:16px;
    -webkit-column-width:144px;
    -webkit-column-gap:16px;
    -moz-column-width:144px;
    -moz-column-gap:16px;
    column-width:144px;
    column-gap:16px;
}

.wrapper li { 
    width:144px;
    height:108px;
    background:#ccc;
    margin:16px 0;
}

Live demo: http://jsfiddle.net/uDAJy/5/show/

This should work in all browsers except IE. (I only have Chrome on my notebook, so I can’t test this in the other browsers.)