Responsive css help please

[lionel.web]

Let's say I have 2 divs that I want to be aside. Either with float:left,either with display:inline-block.
The div with id #div1 I want to be responsive with max-width:700px and the div with #div2, I want o have standard width. Let's say 200px.
I want when the user decreases the size of the browser, the left div (#div1), to minimize it's width, WITHOUT sending the right div (#div2) under.
I want the right div, to be under, only when REALLY dont fits in the screen.
And the left div, to behave just like it is alone. To really decrease it's width.
Is is possible ??? If yes, HOW ????
I dont use and css framework.

An example here:http://archipelago-lng.eu/Results/Publications.html

The left div (the one with the right border), and the right div-column.
Right now, i'm changing the left div's width, with media queries.
But, i want to behave just as when it's alone. (minimize it enough), to see that the red border really decreases...

Thanks in advance

 

[Allan]

I don't know a lot about coding but here is something that might help and I have used in the past.

http://stackoverflow.com/questions/1443 ... ive-change

 

[lionel.web]

I think this is what i'm looking for (from the example i checked).
I'll check it to my code, and if it works, it will be great!

Thanks for your help!

 

[lionel.web]

The above example didnt work.....

BUT this worked !!!!!!

For anyone that is interest:
--------------------------
<div id="div1">Content 1 here</div>
<div id="div2">Content 2 here</div>
<div style='clear:both;'></div>

<style>
#div1{float:left; height:auto; min-height:200px; width:calc(100%-220px);}
#div2{float:left; height:auto; min-height:200px; width:200px;}
</style>

Check now , int the above link how smoothly it works!
Much better than the media queries (i use it know for only one situation, below 500px width)