Question

what HTML and CSS would you use to layout the names of the months in two columns like:

january july
feb     aug
mar     sep
apr     oct
may     nov
jun     dec

month names are coming from an array and html is dynamically generated for i18n purposes.

If it was:

january february
mar     apr
 ...

I would just put them in a DIV, all with double the width of a single month + some space and float them. but ordering them as stated seems more complicated…

Must i introduce two additional DIVs for the columns ?

Answer 1

If the HTML is generated, you could do something like this (jsFiddle):

<div style="width: 100px">
    <script type="text/javascript">
        var months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun',
                      'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
        for (var i = 0; i < 6; i++) {
            document.write('<div style="width: 50px;float: left">' + months[i] + '</div>');
            document.write('<div style="width: 50px;float: left">' + months[i + 6] + '</div>');
        }
    </script>
</div>