CSS: Floating DIVs in an odd order?

Ok, so I am trying to write some CSS for an Amazon WebStore. They format the pages like this:

With some tweaking, and the removal of the right column (unneeded for our layout) I have managed to get the layout like shown below:

The problem is, the red areas are just empty, and I would like to make the left column take up the entire side, like so:

Here is where the problem comes in. I know a little about floats, but I also know it depends on how they are placed, in what order. They put them in the order like this:

<header divs>
<top divs>
<left divs>
<center divs>
<right divs>
<bott开发者_开发知识库om divs>
<footer divs>

Everything in between the Header and Footer (top, left, right, center, and bottom) are contained in a wrapper div.

What would be a general float setup for this? I cannot rearrange the DIV order, so I just need to know if this can be done or not, and if so, some code would be great.

Unfortunately, I cannot post any HTML or anything because you cannot access it. I just need a basic representation, like these divs have this float, this has this, etc.

Thanks!

Only tested in Chrome, so you'll want to look at this in other browsers.

Alternatively, you could maybe make use of display: table-cell to accomplish what you want, but not without breaking support for that certain browser that many people hate.

JsFiddle: http://jsfiddle.net/6SjEm/

HTML:

<div id="header">HEADER</div>
<div id="top">TOP</div>
<div id="left">LEFT</div>
<div id="center">CENTER</div>
<div id="right">RIGHT</div>
<div id="bottom">BOTTOM</div>
<div id="footer">FOOTER</div>

CSS:

body { font: 20px sans-serif; color: #FFF; text-align: center; }
#header, #footer { background: #000; height: 100px; }
#top, #bottom { background: #333; height: 50px; }
#right { display: none; }

#top { margin-left: 220px; }
#left {
    background: #666;
    float: left;
    height: 300px;
    margin-top: -50px;
    width: 220px;
}
#center { 
    background: #999;
    clear: right;
    height: 100px;
    margin-left: 220px;
}
#bottom { margin-left: 220px; }
#footer { clear: both; }

You can possibly use the negative margins trick for top, center, and bottom, depending on the structure of the markup. See http://www.alistapart.com/articles/negativemargins/.