Moving to blogs.hydrussoftware.com

I've been spending some time over the last few months getting up to speed on Community Server, and with its blogging capabilites, we at Hydrus Software thought it best to move our blogs onto an in-house CS installation. So, all of my future blogging activities will be conducted on John's (new) Brain Dump. I hope to see you all there.

(By the way, I was able to update my CSS vs. table layout challenge, in case anyone wants to play with that further.)

Escaping Tables With CSS

I must say that I've become a fan of CSS and the ideas behind the semantic web. I like the notion of table-less design, using <DIV> and <SPAN> elements everywhere to make my HTML clean and self-descriptive.

Juxtaposed against my desire to create slick CSS, though, are the desires of my employers. I'm a consultant, and my job is to get things done. The clients that I work for are businesspeople; they want their applications built quickly, and they aren't terribly interested in paying for hours of tweaking CSS to look exactly right on every browser. They want applications that are functionally complete, look good in IE 6, look acceptable in Firefox, and could look like hell in Opera, Konqueror, or whatever other browser had 0.6% of the market share last week.

That being said, while I would like to use CSS solutions to solve many of the layout problems that I face, I often find myself falling back on good-ol' tables. I just don't have the time to figure out CSS solutions to some presentation issues. As I've reflected on the layout problems that have forced me to use tables, I believe that I've boiled them down to one exercise, and I'm asking for help to solve it without tables. If you want to take a shot at it, I've included the problem here, and you can post potential solutions in the comments.

Essentially, what I want is an HTML/CSS structure that has two columns of arbitrary heights and widths. I use this structure for form entry fields and labeled multi-line values, and every time I try to put together a CSS solution, I throw my hands up in frustration and create a table. I've included here a table-based solution that displays the format that I want, and I've created a small HTML segment that is the starting point of a CSS solution.

Now, before you begin, let me point out that I'm looking for a *simple* solution. Sure, I bet you can solve this problem with thirty lines of Javascript, but why is that necessary for a basic presentation issue? Here's the problem:

[Edit 12/6] Okay, I've realized that the problem case I presented is a bit too simple. In reality, what I want is to be able to have multiple label/value sets on top of one another, with each column of labels and values vertically aligned. When I get a chance, I'll update the test. I know, I know, I'm changing the rules of the game. If you don't like it, you can write about it on your own blog :-)

Two-Column Behavior (Table Solution)

Owner:

Owner Name 1 Owner Name 2 Owner Name 3

Two-Column Behavior (CSS Solution)

Owner:

Owner Name 1
Owner Name 2
Owner Name 3

Rules

1. Text of arbitrary length can be placed in the label, (currently "Owner:").
2. Arbitrary HTML markup can be placed in the value.
3. CSS solution must work across common browsers (IE 6, Firefox).
4. CSS solution must not involve javascript.

Inputs

Label Text:

Value Markup:Owner Name 1<br>Owner Name 2<br>Owner Name 3<br>

cssLabelDiv CSS:

cssLabelSpan CSS:

cssValueDiv CSS: