html - テキストを次の列に分割する 2 つの CSS 列

Question

私は次の設定をしています：

<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>

リスト項目は動的に生成され、1 ページに 10 個表示されます。
それらを 2 列で表示し、各リスト項目をそれ自体のブロックとして表示したかったのです。次のリストの記事部分が次の列にあふれていることを除いて、これは問題なく機能しています。

私が何を意味するかを説明する画像については、以下のリンクを確認してください。
http://ubuntuone.com/4O59Hy13A14rzfPu3N5pcL
ご覧のとおり、赤い境界線は記事部分が次の列にあふれたリスト項目を表しています。

私の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;
}

リスト全体を 1 つのブロックのように振る舞わせるための助けをいただければ幸いです。
ありがとう