Question

I have inherited a web forms report laid out using pure HTML and ASP.NET server controls, and a common layout pattern is a section laid out using a four column table, with first and third columns used for field labels, and the second and fourth columns for values.

As I’ve been tasked with ‘re-skinning’ the report I thought I’d try and improve the semantics of the markup and remove all tables not used for actual tabular data. After some experiments with definition lists for name-value pairs, I settled instead on an ol/li combination, but I can’t figure out how to get both text elements inside each li to occupy 50% of the width of the whole li element.

This is css for the list:

ol.name-value
{
    list-style: none;
    display: table;
}

ol.name-value li {
    display: table-row;
    border-bottom: 1px solid #E8E8E8;
}

This is the HTML:

<div class="span-12">
    <ol class="name-value" style="width: 100%;">
        <li>                    
            <label for="about">Client</label>
            <span id="about">Apartment Applied Visual Arts</span>
        </li>
        <li>
            <label for="about">Report Date</label>
            <span id="Span1">2011/08/08 16:50:10</span>
        </li>
        <li>
            <label for="about">Report No.</label>
            <span id="Span2">33251</span>
        </li>
    </ol>
</div>

And this is what I get as result. The Report Details section is a two-column table, where the Report Details is the above ordered list. I am trying to get the list

Answer 1

Try this:

ol.name-value {
    list-style: none;
    display: table;
}

ol.name-value li {
    display: table-row;
    border-bottom: 1px solid #E8E8E8;
}

ol.name-value li label {
    display: table-cell;
    width: 50%; 
}

ol.name-value li span {
    display: table-cell;
    width: 50%; 
}