How to properly markup/style ordered lists to compensate for large item numbers.

Question

I am dynamically generating a web page containing an ordered list. The page contains 10 items and uses the attribute 'start' to number the items accordingly. A generic ordered list with 'list-style-position: outside' works perfectly fine for items with an item number less than 1000.

The problem arises when item numbers are 4 or more digits in length, part of the item number is partially obscured by the container border. Adjusting the list padding isn't really a solution, as it will still break for item counts with a greater number of digits than the padding has been adjusted to handle, as well as make single digit items look bad due to excessive padding.

Using 'list-style-position: inside' solves the problem of the item numbers being obscured, but introduces a new problem, as doing so causes item content to wrap under the list item numbers instead of aligning to the right of the numbers.

I can always just hide the item numbers and introduce a new floated div inside each <li> and set the content to the list item number, but while that solves my presentation problems, semantically it's less correct, as I'm adding markup and content purely for presentational reasons.

Is there a css solution to this dilemma that I'm unaware of?

    <style>
        #container {
            border: solid;
        }

        #container div, #container h1 {
            border: solid 1px blue;
        }

        #outsideOl {
            list-style-position: outside;
        }

        #insideOl {
            list-style-position: inside;
            padding-left: 0;
        }

    </style>



    <div id="container">

    <ol id="outsideOl" start="3000">
        <li><h1>one</h1><div>the content inside the &lt;li&gt; is aligned to the right of the numbers, which is what I want, but long numbers are obscured by the container's border.  The list elements are shifted to the right by the default padding for an &lt;ol&gt; element.  If the list item number happens to be longer than the padding, part of the number is obscured.</div></li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
        <li>six</li>
        <li>seven</li>
    </ol>

    <hr/>

    <ol id="insideOl" start="3007">
        <li><h1>one</h1><div>long numbers affect content flow and as such are left aligned to the container border (which is good because they are no longer obscured). The problmen now is the block content inside the li gets bumped down to the next line, and left aligns with the numbers. Curse you css!</div></li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
        <li>six</li>
        <li>seven</li>
    </ol>

    </div>

Answer 1

Perhaps you could apply a padding and/or marigin and then use a negative text-indent. I've never tried this myself but its the only way i can think of to handle it with pure css aside from introducing additional presentation markup.

Answer 2

What is the behaviour you want? You can set the visibility of the overflow so that very large numbers stick out into the margin. If you want the width of the numbers column to actually change depending on the number of list items, you will need to use JS. A shame, but it should only be one line (something like $('ul').each(function(el, index){el.css('padding-left',(Math.floor(Math.log(el.childNodes.length)/Math.LN10)+1)+'em');});)