[thelist] auto-sized boxes, and a CSS rant

[Jonathan_A_McPherson at rl.gov]

All,

I have a block of text that I would like to be left-aligned, but centered on
the page, like this (inner box for clarification only):

+------------page-----------+
|      +-------------+      |
|      |do this      |      |
|      |do that      |      |
|      |do otherstuff|      |
|      +-------------+      |
+---------------------------+

In the Old Days, I would have done something like this:

<center>
  <table><tr><td>
    do this<br>
    do that<br>
    do otherstuff<br>
  </td></tr></table>
</center>

Now that I know that <center> is evil and my use of a table for that purpose
is likely to earn me a few years in W3C jail, I'd like to rewrite this
properly.

The obvious solution is:

<div style="text-align: center;">
  <div style="text-align: left; width: 300px;">
     do this<br />
     do that<br />
     do otherstuff<br />
  </div>
</div>

But I have an issue with this solution, which leads me to my rant: I have to
_specify_ a width to get this to happen.

I have been reading "A List Apart" and looking at some of the articles there
on writing sites to use CSS instead of tables. In one example, they used CSS
quite cleverly to line up form labels and elements like so:

   name: inputfield
address: longer inputfield
    zip: short

Guess how it was done? Again, absolute-pixel width specification.

This bothers me for two reasons:
(a) It is _dependent_ on the user's font settings. If the user selects a
large font, the layout breaks down, because the width specified isn't enough
to contain the text any more. Isn't this pixel-precise-or-else attitude the
exact opposite of what we're supposed to be striving for,
accessibility-wise? (Could this problem be mitigated any by using ems
instead of pixels for sizing? Probably, but that leads me to my bigger
issue.)

(b) It is _independent_ of the text. I want the CSS box to be only big
enough to hold the text it contains (not larger, not smaller), and I can't
do it. I have to determine a width that is about the same size as the text.

This is enough trouble to do manually every time I change the text, but it
becomes near-impossible when the text comes out of the database.

Any insight? I'm curious as to what some of you have done -- I'm sure I'm
not the only one who's run into this. Am I missing something? Must I really
use a table for such a simple effect?

--
Jonathan McPherson, LMIT/SD&I
Software Engineer & Web Systems Analyst
email / jonathan_a_mcpherson at rl dot gov
phone / 509.373.0150