Please don't make me use a table!

Site can be seen at http://www.evocreative.com/audiot/
My original design did not have the horizontally expanding bars behind the navigation and the footer. I didn't intend it to be that way but the client demanded it. This is the everything auto expands site! : )

So I have it working but my one problem is the grey column on the left. I need it to expand vertically with the column on the right containing the main text. I cannot figure out how to get this to work properly.

I realize the floating grey box over the footer is a real hack job but I couldn't find any other way to do it and keep that box floating centered with the rest of the site. I can't put it into the footer div as far as I can see because it won't stay aligned with the grey column above it.

I'd really appreciate some help on this. My client has backed me into a real corner here.

I have put all the files in a zip here: www.evocreative.com/audiot/audiot.zip

The column height thing just can't be done with CSS at this point afaik, sorry. You might be able to create the illusion, though, by using background color and a containing div for the two columns. Unfortunately, different browsers interpret background inheritance differently.

I hate to be the one to tell you, but your page is all over the place when viewed with Firefox. Also you need a photograph the right size.

"All over the place"??? Can you be more specific. It looks correct to me in Firefox except for the grey box.

I had to go with a two column table for this. Hated to do it but it works. Its not online yet.

If your content is always longer than the side bar, you can put both sides in a div with a grey background. Then set the background color of the content div to white. That should take care of it. There is no direct way to achieve what you want, but this simple workaround is key in many CSS based websites (including mine).