CSS Advice w/ Layout & Structure of Markup

Hi,

I’m working on this site and have kind of coded myself in a corner and would appreciate some advice on how I can rework the code for this page so it can function better. I’m including a JPG of how the site will eventually look (one day) and a URL of my current progress. I would reccomend viewing this in Firefox for the time being because that’s the only browser i’ve tested this mess in so far.

http://demo.zanzinato.com/ovpr/cwc/

Specific issues I need help with.

The

<div class="clear">&nbsp;</div>

markup above the footer is not clearing the floats properly and I don’t know why.

The

<div class="bar">&#160;</div>

which corresponds to the bottom 3 gray bars doesn’t really seem like the best way to go about this. Should I merge the bottom and top set of gray bars into the background image or try to find a better way to use CSS to deal with this.

And a major issue has to do with the middle and right hand column. If you look on the JPG you will see blue quote graphics that will correspond to paragraphs. The way the markup is layed out now will make it very difficult to position the quote graphics with the specific paragraphs unless every paragraph and quote graphic are identical size.

I could really use some solid advice about how to pull this mess together. Try not to focus too much on how the navigation and links aren’t really styled yet. I just haven’t gotten around to it yet because i’m trying to deal with these other issues.

Thanks a lot,

Serge