Positioning in css, max right and left until resize of window is to small, then override the the old max and set a new max position

Question

I've started to create a new homepage and I realized that my old methods of creating said webpage were outdated. While learning about positioning divs in css I stumbled upon a problem I really find hard to crack.

On my webpage I want to have a picture div next to a text div, I want this text div to be a minimum of 500px, but I don't want it to stretch unless the screen is wide enough to show both the picture and the text(I got this working). The problem I get is when I want to make the screen smaller, I want the text div to decrease in width until it hits 500px, if the user then shrinks the screen more the text should then, and only then overlap the picture.

Here is an example of something similar. http://jsfiddle.net/mnSGZ/1/ The problem is when shrinking it, I don't want the horizontal scroll to appear until the black square is covering the whole gray squares width. I understand that 'margin-left: 200px;' prevents exactly this but is there some sort of max-margin to make this work?

code from jsfiddle:

#container {
    background-color: gray;
    margin: 20px;
    min-width: 700px;
    height: 300px;
}


#nav {
    background-color: black;
    margin-left: 200px;
    height: 50px;
}

Answer 1

Use CSS3 Media Queries to style elements based on screen resolution. This link may help you:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries