I have visited CSS atrocities upon the DNA Lounge calendar and top-level page. Let me know if they work for you and look ok.

The calendar should now re-flow to fit in whatever sized window you have, instead of showing a horizontal scrollbar when the window is too narrow. It also does slightly different things when the window is really narrow, e.g., iPhones.

(See how I got that left column to have a green background that goes all the way to the bottom of the event box even when it's not the tallest column? That was fucking hard.)

(See how the calendar grid at the top resizes to the width of the window, but the boxes remain square? That was also really fucking hard.)

I'm curious to know how it looks in old browsers, and on older and/or less sophisticated phones.

Some CSS questions:

1. Is there any way to flow text through two equal-sized columns?

   I want to present text it in a two-column format, unless the window is too narrow, in which case, one column. I've somewhat accomplished this on the tickets page, but it doesn't work great. I end up with columns of unequal height, because I have to arbitrarily select N items for the left column and M items for the right, because I don't know how much space they will occupy pre-layout.

   Also, when the min-width on those columns is exceeded and they float to be stacked above each other instead of side-by-side, they do not re-flow to respect their max-width; instead they stay at their min-width, which is dumb.

   Is there any better way to do this?

2. I've got a bunch of text, and an image floated right. When the available space is limited, and the first few words in the paragraph happen to be short, I get crap like:

   All  -------------------
   work |                 |
   and  |                 |
   no   |                 |
        |                 |
        |                 |
        |                 |
        -------------------
   tentacles makes Jack a
   dull boy.

   More sane wrapping would be:

        -------------------
        |                 |
        |                 |
        |                 |
        |                 |
        |                 |
        |                 |
        -------------------
   All work and no tentacles
   makes Jack a dull boy.

   The only way around this I've found is to manually make the first three or four words next to a float be non-wrappable, like: <SPAN STYLE="white-space:nowrap">All work and</SPAN>.

   Is there some more sensible way?

3. I seem to have rounding errors in the scaling of the images on the top-level page (sometimes the images end up not being the same height), and these rounding errors appear to manifest differently in all three browsers. Ideas?

Just for laughs, I also made the calendar pages be formatted as the hCalendar microformat. This is, as far as I can tell, completely useless, but maybe it won't be some day. (The idea is that your web browser can automatically notice that there are calendar entries here. None do. But hey, they cited me as required reading, so, why not.) Questions, though, for people who understand this microformat stuff:

4. I'm using empty ABBR tags (<ABBR ...></ABBR>) for dtstart, duration, and tzid instead of picking some arbitrary text to wrap it around because I don't want to see a tooltip there and there's no way to turn that tooltip off. But the validator issues a warning about that. Does it matter?

5. In iCalendar, I format my dates in local time and include a TZID, e.g., DTSTART;TZID=US/Pacific:20100625T210000. This works in Apple iCal. I saw an hCalendar example using <ABBR CLASS="tzid" TITLE="US-Pacific">, but I'm not sure that's actually legal. Is it?

Thank you. Drive through.