Minimal

Can you help?

I know site-design blog entries are boring, but CSS and I just aren’t getting on. I want the site to look like this (sans arrows), but I don’t want to resort to tables. The idea is that the permalist would stay left-aligned inside the right-aligned background image. The list would also retain its border, but would get a semi-transparent background via a neat dithered-transparency trick (this bit isn't a problem). However, I have a few problems:

1. How do I get the border snug around the permalist with the dithered background filling the inside? Using a <div> means the border’s not snug to its content, whereas using a <span> just puts a border round (and background on) individual list entries. Only a table seems to do the job properly, but they’re anathema, right?
2. How do I get the dynamic-width’d permalist to remain left-aligned in a right-aligned, fixed-width area?
3. Can I do it all in a way that leaves the various bits in this order in source: header, blog content, permalist, footer? I want these things in the right order for browsers than don’t understand the CSS, but this is the least of my worries.

Update: As you can probably see, it’s all sorted now. Well, apart from the whole dynamic width thing, but I don’t care about that any more. :)