Question

Have a tree menu made using nested ULs 3 levels deep. The bottoms 2 levels are hidden/collapsed by default. The bottom 3rd level shows a comparison of a “left” versus “right” value. I want to make all of the “left” spans the same width, but not a fixed width. I thought about a jquery loop to find the max width of all such spans, then go back and set them all to that max width. But when hidden, jquery width() is always 0. So I would have to expand the whole list first, do this work, then collapse it again. Even then, setting the width via jquery didn’t seem to do anything. The spans have a style=”width: 93px;” in them, but the actual width didn’t change. Is there any CSS2/3 way of linking the width of these elements? Or a better javascript way?

<ul class="hidden">
  <li>
    <span class="left">cat</span>
    &hArr;
    <span class="right">dog</span>
  </li>
  <li>
    <span class="left">bird</span>
    &hArr;
    <span class="right">horse</span>
  </li>
  <li>
    <span class="left">some long text</span>
    &hArr;
    <span class="right">more long text</span>
  </li>
</ul>

span.left{text-align:right;}
ul.hidden{display:none;}

Answer 1

You can use the CSS properties for displaying as table cells (e.g. http://ajaxian.com/archives/display-table) but really, you’re describing what is semantically a table. Why not just use table markup? It’s not cursed or anything.