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

[Jonathan_A_McPherson at rl.gov]

Rob,

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

That doesn't work; the <p> tag takes over the entire width of the containing
element, so the effect of the <div> is virtually nothing. In other words, I
want this:

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

but the code above gives me this:

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


I can set margins, but that's just the inverse of specifying widths -- I'm
still having to manually decide how much space to use.

What I need is CSS-only way to create a block-level element whose width is
determined by its text. Only then can I use CSS to duplicate the effect I'm
getting with a table (as in the first diagram above).

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



-----Original Message-----
From: Rob Smith [mailto:rob.smith at thermon.com]
Sent: Tuesday, June 25, 2002 9:36 AM
To: 'thelist at lists.evolt.org'
Subject: RE: [thelist] auto-sized boxes, and a CSS rant


--
[ Picked text/plain from multipart/alternative ]

Easy,

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

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

http://www.azuritedesign.com/hckarate/about.htm

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
125
            locations throughout Texas and one in Oklahoma. The A.S.K.
program
            is sponsored by school districts, colleges, churches and other
community
            facilities. By working directly with these local community
organizations.,
            A.S.K. can offer a complete and affordable martial arts program.
</p>

      </blockquote></div>

HTH!

Rob.Smith



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


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