How to implement this logic in CSS?

I want two div, the first one is a big square, and the second开发者_JS百科 one is small square. And the second one is inside the big one. The big square at least 640px, if > 640px, it will get the screen 80% width. The second one's width is big square's width -200px.

Can I implement this logic in CSS? or I need a javascript to dynamically set it? Thank you.

Are the squares you talk about supposed to real squares (width==height) or do you just care about the width and rectangles are ok as well? In the latter case, this can be done with plain css:

#big{
    width:80%;
    min-width:640px;
    padding:100px;
}
<div id="big">
   <div id="small">
   </div>
</div>

See it in action here: http://jsfiddle.net/2evFx/