Unordered List Centering - Not Menu

[Borvik]

This seems like it should be really easy, but my mind is starting to fog up (maybe I just need more caffeine).

I have an extremely long list of items (over 400), that I want split into two columns. (page is built dynamically)

The easiest way to handle this was to grab all the items divide in two and generate a table with two columns and each column containing a table listing the items.

I'm trying to get rid of the nested table approach, and now have the items in to unordered lists within the two columns (1 row) of the table.

I order to make it look nice I want to center the lists - but not the text! With the items being different lengths (and being generated dynamically) I can never know just how long an item in the list may be, but I want the first letter of every item to line up. Centering the different length items causes them not to line up.

Here is the table:

<table>
 <tr valign="top">
  <td><ul>
    <li>Title1</li>
    <li>Title2</li>
    <li>Title3</li>
    <li>Title4</li>
    <li>Title5</li>
    <li>Title6</li>
    <li>Title7</li>
   </ul></td>
  <td><ul>
    <li>Title8</li>
    <li>Title9</li>
    <li>Title10</li>
    <li>Title11</li>
    <li>Title12</li>
    <li>Title13</li>
    <li>Title14</li>
    <li>Title15 longer</li>
   </ul></td>
 </tr>
</table>

And the relevant CSS:

html, body{ padding: 0; margin: 0; height: 100%; width: 100%; }
table{ width: 100%; }
table td{ width: 50%; text-align: center; }
ul{list-style-type: none; margin: 0 auto;}

I am using the XHTML Strict doctype.

Any ideas on how to center the lists based on the full width of the list, and not on the text of each individual item?

Thanks.

 

[BillyRayPreachersSon]

If you give the ULs a "text-align" of left, and specify a width for them, then you get the result you're looking for.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Borvik]

Yes, but I can't specify a width - because the widths of the items are going to vary drastically.

I've had some caffeine, and it seems to have helped .

I've wrapped the ULs in a div and styled the div with the following:

margin: 0 auto; display: table;

That seems to be working. (I don't need to worry too much about cross-browser compatibility as it's for my personal use anyway.