Resize before switching place? - html

Question

I have a simple setup like this :
<div id="div0">
<div id="div1">Content</div>
<div id="div2">Content</div>
</div>
The two middle divs(1,2) have width:100% and max-width:390px plus floatLeft. When resizing the browser div2 will jump a row down and when getting less then width 390 thay will both start to resize.
What I need is to resize to a min-width first and then jump down to the second line.
How do I do that?
Edit1 : example : http://jsfiddle.net/dwDZx/

Answer 1

Here's a responsive example of what you're asking about. I changed some widths to make it easier to follow the example and see where the numbers come from. http://jsfiddle.net/dwDZx/4/
I change background colors in the different responsive layouts to show you which section is active at which point in resizing the browser.
The only change I made to the markup was to create a "content" div inside div1 and div2. This allowed me to set a border. If I set width of div1 and div2 to 50% AND set a border, then the total width would be 50%+2px (1px left + 1px right) which would cause the floats to wrap. By putting the border on the content div, it puts the borders inside the 50% instead of outside.
CSS:
* { margin: 0; padding: 0; }
.content { border: 1px solid black; }
#div1, #div2
{
float:left;
}
#media (min-width: 801px)
{
#div1, #div2
{
width: 400px;
background: green;
}
}
#media (min-width: 400px) and (max-width: 800px)
{
#div1, #div2
{
width: 49.9%;
background: red;
}
}
#media (max-width: 399px)
{
#div1, #div2
{
float: none;
width: 100%;
}
}
EDIT: I thought about it and simplified things a bit. See http://jsfiddle.net/dwDZx/5/ The CSS changes as follows: set a max-width on the parent div to be the max width of div1+div2. Then you only need one media state: for when it's < 400px and should be on one line.
CSS:
* { margin: 0; padding: 0; }
.content { border: 1px solid black; }
#container { max-width: 800px; }
#div1, #div2
{
float:left;
width: 50%;
background: green;
}
#media (min-width: 400px) and (max-width: 800px)
{
#div1, #div2
{
background: red;
}
}
#media (max-width: 399px)
{
#div1, #div2
{
float: none;
width: 100%;
background: blue;
}
}