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

Rob Smith rob.smith at thermon.com
Tue Jun 25 11:33:01 CDT 2002

[ Picked text/plain from multipart/alternative ]


<div align=center>
   <p align=left>

Alternatively, you can declare class definitions within the div tags that
will set the margins.


This is precisely the code I used in the previous link:
<div align="center"><blockquote>

          <p align="left">H.C.K. currently has 39 locations throughout the
Hill Country area.
            Presently, the A.S.K. and its divisions teach in approximately
            locations throughout Texas and one in Oklahoma. The A.S.K.
            is sponsored by school districts, colleges, churches and other
            facilities. By working directly with these local community
            A.S.K. can offer a complete and affordable martial arts program.




-----Original Message-----
From: Jonathan_A_McPherson at rl.gov [mailto:Jonathan_A_McPherson at rl.gov]
Sent: Tuesday, June 25, 2002 11:19 AM
To: thelist at lists.evolt.org
Subject: [thelist] auto-sized boxes, and a CSS rant


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):

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

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

    do this<br>
    do that<br>
    do otherstuff<br>

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

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 />

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

(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
For unsubscribe and other options, including
the Tip Harvester and archive of thelist go to:
http://lists.evolt.org Workers of the Web, evolt !

More information about the thelist mailing list