Make a column fluid down to min-width, then push float sidebar down

Suppose you have two divs: one with fluid width with a min-width and another div that's floating to the right. For example, this live demo (with code) at jsbin.com has this:

<div id="container">
  <div id="header">header</div>
  <div id="fixedFloatingColumn">fixed-size column<br />o<br />o<br />o<br />o</div>
  <div id="fluidNonfloatingColumnContainer">
    <div class="column">stretchable column 1</div>
    <div class="column">stretchable column 2</div>
    <div class="column">stretchable column 3</div>
  </div>
  <div id="footer">footer</div>
</div>

if you resize the browser and make it narrower, the fluid div adjusts accordingly, until it hits the min-width. After that, if you narrow the window even more, the horizontal scrollbar appears and the right floating div starts to overflow hidden to the right of the window.

What I'd like is, if the user keeps narrowing the window, after the non-floating div hits the min-width, the browser should push the floating sidebar div down below the non-开发者_JS百科floating content, instead of overflowing (hiding) to the right. Is that possible?

I believe so, if you're willing to use media queries. For a short primer on how to do "responsive web design" I'd start by looking at this article by Ethan Marcotte. Simon Collison's website is an excellent example of what I think you're trying to accomplish.