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

Techwatcher techwatcher at accesswriters.com
Tue Jun 25 12:33:01 CDT 2002


Hi, Jonathan, et al --

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

(Aren't you that guy redoing the IRS site? Best wishes!)

You don't really want a left-aligned block of text, do you? You really
want a left margin, am I right? Well, guess what -- you can have a left
margin (or at least, a {margin-left: width}). Only trouble is, as I
just learned from some kind tester on this list, some browsers will get
it wrong. So use the padding-left instead of margin-left. Advantage:
padding applies to the content you're dealing with, rather than some
div you've stuck it in.

You still have that problem with setting a width for padding, but at
least you're thinking more straightforwardly about what you really
want, and it applies to your content (not a meaningless container at a
higher level). Now, if you happen to have a logo that you want to fit
exactly in that left margin, the width of the image tag (plus some
desired value of padding or border around the image) would give you
a "good" absolute value in pixels. Otherwise, you can specify padding-
left and padding-right using some percentage. (Not all browsers can
handle it, but I don't know the details.)

Good luck!

Cheers --
Carol Stein
techwatcher at accesswriters.com




More information about the thelist mailing list