possible to make a second div float but drop down when width is reduced w/o css3 or js?

Question

I have two divs as follows:

fluid width content fixed width content

I'm trying to make it so that when the available screen width is > 600px, they'll appear side by side. When the screen is resized below that, the second div needs to drop down below the first one. In either scenario, they need to take up all available width (so when the second one drops down I can't have a 200px padding/space on the right of the first one).

I believe it's possible to do this with JS and/or css3/media queries, but I'm wondering if there's a simpler solution?

To put it in context, I need to design a fluid page that will be displayed via an iframe. I will not be able to control the width of the iframe, so need my two column content to be fluid.

Answer 1

Apply a min-width to the div that's not floating. If the browser can't satify the min-width with the floating box to the side, it'll drop the floating box down and the fluid width box will fill the entire width, until it gets shrunk to its min-width again in which case it overflows the body.

Answer 2

Try this:

div
{
    min-width:100px;
    max-width: 150px;
    background-color:yellow;
    float:left;
}

min-width and max-width