HTML5, CSS3 columns

Question

Hay all im building a news aggregator with SimplePie, the SP elements are working fine but I would like to have the feeds that it pulls in displayed in columns across the page using HTML5 and CSS3. I have managed to implement it so that the columns are formed and display the feeds, but at the moment the stories are being ordered one on to of the other from left to right with the newest being displayed top left, the second newest bellow the first in column one and so on. What I would like is for the stories to be displayed from left to right across the column so that the newest is at the top of the first column, the second newest at the top of the second column, the third newest in the third column and so on.

The code that Im using at the moment is as follows:

 <div id="page-wrap">




    <?php if ($feed->error): ?>
  <p><?php echo $feed->error; ?></p>
<?php endif; ?>

<?php foreach ($feed->get_items() as $item): ?>

    <div class="chunk">

      <h4 style="background:url(<?php $feed = $item->get_feed(); echo $feed->get_favicon(); ?>) no-repeat; text-indent: 25px; margin: 0 0 10px;"><a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_title(); ?></a></h4>

      <p class="footnote">Source: <a href="<?php $feed = $item->get_feed(); echo $feed->get_permalink(); ?>"><?php $feed = $item->get_feed(); echo $feed->get_title(); ?></a> | <?php echo $item->get_date('j M Y | g:i a T'); ?></p>

    </div>

<?php endforeach; ?>

And this CSS:

#page-wrap { 
width: 100%; 
margin: 25px auto; 
height:400px; 
text-align: justify;
-moz-column-count: 3;
-moz-column-gap: 1.5em;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 3;
-webkit-column-gap: 1.5em;
-webkit-column-rule: 1px solid #c4c8cc;
}

If anyone could help me out with this that would be great.

Answer 1

Then you don't need columns. You juste put the links one after the other.

One solution would be to set the width of the elements that contain the elements and have a float: left;. Then you make sure that every three elements (for examples), you go to the next line.

There might be other examples.

Answer 2

You're trying to make CSS3 columns behave like normal divs, this will bloat your css code and make it difficult to maintain. But you want an answer, not a lecture semantics, so the solution is:

h4 { 
  -moz-column-break-before : always;
  -webkit-column-break-before : always;
}