3 columns layout with rightmost column wrapping under middle one if too narrow

I want to create a 3-column layout with fixed-width left and right column, and middle column taking the rest of the space. That's pretty easy. Now I want the middle column to have a min-width, and the rightmost column to wrap under the middle column if the total width is too small.

This is the normal layout:

+----------+ +------------------------------+ +--------------------+
|   LEFT   | |        MIDDLE (main)         | |       RIGHT        |
+----------+ +------------------------------+ +--------------------+

This is the layout under a certain total width:

+----------+ +-------------------------+
|   LEFT   | |      MIDDLE (main)      |
|          | +-------------------------+
|          | +--------------------+
|          | |       RIGHT        |
+----------+ +--------------------+

• I don't mind changing the order of the DIVs in the HTML.
• I don't mind wrapping DIVs in extra DIVs.

How about this: http://jsfiddle.net/X3tPJ/

"Right" will wrap under "Main", but those two won't wrap under "Left".

I made a fiddle that has the three columns. It groups the middle and right columns together and floats it next to the left column. Take a look and see if it does what you need.

Semantically, you're actually best off setting up your content like this:

<div id="main">
...
</div>
<div class="sidebar" id="sidebar-left">
...
</div>
<div class="sidebar" id="sidebar-right">
...
</div>

Check out this article on negative margins to see how to get this technique to work.

I recommend this technique over the others for a few reasons. My main reason for choosing this method is that by doing this, your content actually starts loading before your sidebars do. There are also some benefits to SEO that you gain from placing your Content before your sidebars.