html - 2 CSS columns spliing text into next column

Question

I have the following setup:

<div id="albums">
    <ul>
        <li>
            <a href="">
                <img src="album1/cover/image/here" />
            </a>
            <article>
                <h4>Album1 title</h4>
                <p>Album1 Description</p>
            </article>
        </li>
        <li>
            <a href="">
                <img src="album2/cover/image/here" />
            </a>
            <article>
                <h4>Album2 title</h4>
                <p>Album2 Description</p>
            </article>
        </li>
    </ul>
</div>

The list items are generated dynamically and displayed ten per page.
I wanted to display them in two columns and display each list item as a block by itself. That is working out okay except that the article part of the next lists is spilling over to the next column.

Check the link below for an image explaining what I mean.
http://ubuntuone.com/4O59Hy13A14rzfPu3N5pcL
As you can see, the red border represents a list item whose article part has spilled to the next column.

My CSS:

#albums {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}
#albums li {
    display: block;
    border: 1px solid #aaa;
    width: 295px;
    margin-bottom: 15px;
    box-shadow: 0 0 2px #ccc;
}
#albums li img {
    display: block;
    width: 100%;
    height: auto;
}
#albums li article {
    padding: 5px 5px 10px 5px;
}

Any help to make the whole list act like one block is appreciated.
Thanxs

Answer 1

Waitting for answers