Wordpress & CSS3 column-count

Question

I'm trying to divide an events list into 2 columns. When I do a simple column-count, I can't seem to get them to align at the top. What am I missing here??

The domain is here

<div id="eventssection">
    <img id="eventheader" src="/images/calendar.png">
    <div id="calendarcol">
    <?php echo do_shortcode('[events]'); ?>
    </div>
    <img id="eventmore" src="/images/moreevents.png">
</div>

#calendarcol {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-width: 15em;
-moz-column-width: 15em;
column-width: 15em;
width: 500px;
margin: 0 auto;
}

Thanks!

Answer 1

Add this to your CSS:

.event-item {
    margin: 1em 0 !important;
    float: left;
    width: 250px;
}

The float will make sure that each element is reading the height of the other elements and will then place them accordingly. Though, you will then need to make the width of each element half of the width of your container so that it centers your text in each "column"