Multi-Column Article List?

I’m trying to display article blurbs in two columns on a page. The best I could come up with was something equivalent to this, which I managed to achieve using relatively simple floats. What I’m trying to achieve however is something more like [url=http://i54.tinypic.com/5mffjl.png]this.

Can anyone come up with a possible way of achieving this? Note, the pages are dynamically generated (using PHP in this case), so I can implement logic on the server-side if needed. JavaScript-based solutions are also welcome, though pure CSS solutions are obviously more desirable.

Note also, that I only need to support IE7 and up (in addition to Firefox, Chrome, etc), so don’t worry about IE6.

Hi,

The only way to do that in css is to create two floated columns and then place the individual elements in each column as required.

You can’t float left and then right because the floats will snag on each other and not line up in the order that you want. If you clear them to stop them snagging then the next float starts level and you will get a big gap above.

I’ve actually tried to do this a number of times and get very close but ultimately it fails.

Just create two main columns and then stack each element in the required column. You should be able to provide the logic for that serverside hopefully.

Something simple:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en"><head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>No absolute positioned divs</title>
 
  <style type="text/css">

    p {
        background:red;
        width:20em;
        overflow:auto;
      }
    
    p span {
        background:blue;
        float:left;
        /*width:50%;*/
        width:9em;
      }
    p, p span {
        text-align:justify;
        margin-right:0.5em;
      }
    
  </style>
  
</head><body>

  <p><span>The first column. The first column. The first column. The first column.</span>The second column. The second column.</p>

</body></html>

You need to keep the number of text lines in the second column lower than the number of text lines in the first column. You do that by JS or server side probably, counting the chars in the whole article and putting 5-10% more in the first column maybe?

I guess that, using consecutive floats and proper em division, it can be extended to more than two columns.

I just thought that you could probably quite easily achieve this using JavaScript. Say your article container was called “.article_container”, and you have “.left” and “.right” for the left and right container columns, you could basically sequentially add each “.article” to either the “.left” or the “.right” column depending on which has the lesser height. For those with JavaScript disabled, you could have it gracefully fall back to the less ideal staggered arrangement, or possibly a column-less display.

I might pursue this route a little further. For this particular website which is centered around mapping, user’s pretty much need JavaScript enabled to use the site anyway, so it would probably be quite acceptable.

Yes I think a script is the only way to do exactly what you want as I have tried this many times in pure css and it always fails at some point.