Div goes under Div - css

Question

I have a layout with two divs on the same line. I need one div floated left and the other floated right so that the divs will stay on their respective sides no matter the browser size and the div on the right won't fall below the left floated div when the browser size is smaller than the two divs.
I need the browser to cut off the 2nd div after the 2 divs touch each other when the browser shrinks.
I had a picture to illustrate my question but I don't have enough reputation points to post it.

Answer 1

Do you really need to float the divs? If not you can always create a wrapper for the divs with a minimum width set to allow the divs and a position of relative or absolute to stay next to each other,
#wrapper {
min-width: 250px;
position: relative
}
then set the inner divs display property to "inline-block".
.blocks {
display: inline-block;
position: absolute;
}
All together, this will create a "safety bubble" in which your divs can rest side by side without jumping to the next line, even after window resizing.
Check it out here.
EDIT
After a couple of trial and errors I believe we have an answer.
Javascript.
So in interest of time, I will post the code on jsFiddle here. Breifly, what I added to the previous code was a script that ( on window.onload) you get the id's of both inner divs. You then create two objects to hold the position of their facing borders which are then compared to see if the second div ( one on the right ) has crossed into the first. The numbers in the div are there as a place marker to show that the div does not slide onto/under the other.
*PS the 200px is just a demo number, they can be changed)

Answer 2

I'm assuming that what you mean by "cut off" is that you want the left div to appear "in front of" the right div. To do this, you want to give the left div the css
{
position:absolute;
left:0px;
z-index:2;
display:inline-block;
width:[number]px;
height:[number]px;
}
and the right div
{
position:absolute;
right:0px;
z-index:1;
display:inline-block;
width:[number]px;
height:[number]px;
}
and to their shared parent div add the css "position:relative;".
Alternately, giving both divs "position:fixed;" might work, that makes them relative to the browser winder instead of the parent div, though that will give you very different outcomes when people try to scroll. You'll also need to give the left div a background that isn't transparent, or they'll just overlap. Also note that "position:absolute;" puts the divs 'outside the flow' as it were, in the sense that they will also overlap anything else you put in, and your design has to account for this.
Working example http://jsfiddle.net/RdX5P/
If by "the browser needs to cut off the second div" you mean you want the second div to just disappear when the window gets too small, just float the two divs and put them in a container div with set height and with "overflow:hidden;"