CSS: Fill remaining width space of lower elements - html

Question

A basic sounding question I can't find an answer for.
Making an element stretch to use the remaining width of a page is nothing new. Same with changing side by side elements to be stacked on small screens. These are both situations that allow you to pick the element order/composition (E.g. float: direction; and DOM element order for top/bottom) but how do you set the order when doing both? I guess you could say I want to control my element stack overflow. wink wink nudge nudge
The "block formatting context" trick has gotten me so close to what I want.
html:
<div class="blue">Some navigation list items.</div>
<div class="red">Search box expanding to cover empty space.</div>
css:
.red {
width:auto;
height:150px;
background:red;
min-width:200px;
overflow:hidden;
}
.blue {
height:150px;
width:300px;
background:blue;
float:left;
}
http://jsfiddle.net/A8zLY/5503/
In my case, how do I get "red" (the dynamicly sized box) to be on top when it meets its threshold (min-width)? I can't use a media query as navigation list items can change.

Answer 1

Well, here goes.
Although I am not sure what you are trying to accomplish and this solution might not fit your layout needs, here is a solution to the problem - switch the position of the two elements and add this css:
html, body {
padding:0;
margin:0;
}
.red {
position:relative;
margin-left:300px;
height:150px;
background:red;
}
.blue {
position:absolute;
left:0;
top:0;
height: 150px;
width: 300px;
background: blue;
}
#media (max-width:300px) {
.blue {
position:static;
width:100%;
}
.red {
margin-left:0;
}
}
http://jsfiddle.net/A8zLY/5506/
I used a media query breakpoint to wrap the two elements.
The only way for elements to be placed on top of others when they are wrapping is to be placed first in the HTML markup.