Here's the page I'm working on now: http://www.grscgaming.com/members.html

I want to have 2 columns and I don't want the text in the first column to wrap around the callout box in the second column.
Additionally, I also want the "#content" container to wrap around both columns.

I want to stay away from tables since it's been recommend by the W3C we don't use it for layout (even though it would be easier in this case).
I don't want to use any hacks (like repeating background, browser tricking with margin/padding, etc) because of all of the problems associated with them.

The main problem I see is when I float each column, the DIVs go out of bounds and is no longer wrapped by the bounding container (#content). Short of setting a fixed height, I see no other way around this.

So what can I do to get what I want?

Although you shouldn't use tables for layout, that's not to say tables can't be used at all in a page. In your case, Acreo, it is perfectly fine to use tables to display the Member Roster information as it is tabular data. This is very different to using tables for creating menus, content and sidebar areas on a page. Pretty much any information that is data with rows/columns should be in a table. This is semantic markup and is the same reason why headings should be in <h1>, <h2>, <h3> tags, etc and lists should be wrapped in <ul> or <ol> tags, for example.

Tables are always a controversial subject but hopefully that clears up some confusion.