Two columns - one with the boxes and one with the text?

A div with 'float: right'?

Or, conversely, put the boxes in a div a 'float: left' so the text starts to their right?

Yes, wrap all three boxes in another div with "float:left" defined on it. That does what you want in Firefox, haven't tested in IE or Safari.

Here's my first bite.

It's trickier if you want the main text to wrap closely around all three menu boxen; I'm thinking on approaches to that.

What's an xdiv?

Yes, I do want the text to wrap around the menu boxes, rather than having a big white gap.

A commented out div! :)

How about this? It works, but at the price of two non-structural divs, and would need javascript if the top two boxes were of flexible height.

Hurrah, thank you! The top two boxes will be fixed height, so that's not a problem.

Just as an aside from a design point of view (and not criticising your code, which seems to solve the question admirably)...

If the end result is intended to have a stream of continuous text in the top right, flowing around the boxes, I find it really, really uncomfortable to read. And it violates several of the basic rules of design I've been taught about making such things readablem which heavily recommend straight-line margins as far as possible.

Fear not. What you can see is only a very rough sketch. I promise to make sure the end result is usable.

oh, and tested on Moz, IE6 and IE7 FWIW. And I'm not even dressed yet :)