Home/ Questions/Q 6177337
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T00:15:17+00:00

This code / markup… <ul id="tag-directory" class="clearfix"> <li py:for="tag in tags"><a href="${h.url_for(controller=’/media’, action=’index’, tag=tag.slug)}">${tag.name}</a>

  • 0

This code / markup…

<ul id="tag-directory" class="clearfix">
        <li py:for="tag in tags"><a href="${h.url_for(controller='/media', action='index', tag=tag.slug)}">${tag.name}</a> (${tag.media_count_published})</li>
</ul>

With this styling…

#tag-directory {
    clear: both;
}

#tag-directory li {
    width: 50%;
    float: left;
}

Produces alphabetical sorting in the browser like…

A1               A2
A3               B1
B2               B3
B4               C1
C2               C3

But what I want is…

A1               B3
A2               B4
A3               C1
B1               C2
B2               C3

How do I do that?

Settled on Adam Wulf’s JQuery plug-in: Columnizer.

Uploaded Wulf’s three .js files to server; then…

This markup in head of HTML file:

<head>
<script src="/scripts/third-party/jquery.js" type="text/javascript" ></script>
<script src="/scripts/third-party/autocolumn.js" type="text/javascript" charset="utf-8"></script> 
<script> 
    $(function(){
        $('.wide').columnize({width:360});
    });
</script> 
<style> 
    .wide {clear:both;}
</style> 
</head>

And this markup in the body:

<div class="wide"> <!--per styling in head -->
    <ul id="tags" class="clearfix">
        <li py:for="tag in tags"> <!-- Python code dynamically generating hyperlinked li elements -->
            <a href="${h.url_for(controller='/linkedmedia', action='index', tag=tag.slug)}">${tag.name}</a> (${tag.linkedmedia_count_published})
        </li>
    </ul>
</div>

That’s it. Probably can compress the Javascript to speed up load time of page. CSS3 is faster and quicker and generally more elegant solution in terms of simplicity, but Wulf’s Javascript is a tolerable hack to get the same look on IE as CSS3 provides in modern browsers. (What a pain IE is…!) Pure CSS solutions do not work for a dynamically generated list of li elements that are hyperlinks. A screenshot of how resultant Columnizer solution appears in IE8 posted below…

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If Internet Explorer’s lack of support is not an issue for you, you could use CSS3 columns.

    Update in response to comment:

    As your items are all in one list (and I assume you want to keep it that way), it’s tricky. You might like to take a look at this (pages 2 and 3 deal with fake columns), but to be honest I’d recommend considering CSS3 columns and allowing those with IE to see the list in one column. (Not ideal, but Do websites need to look exactly the same in every browser? 🙂 )

    As far as I know, other options would involve splitting the list up into two elements or getting involved with Javascript fudges.

    • 0