Comment implémenter cette logique en CSS?

Question

Je veux deux div, le premier est un grand carré, et le second est un petit carré. Et le second est à l'intérieur du grand. Le grand carré au moins 640px, si> 640px, il obtiendra l'écran 80% de largeur. La largeur du second est la largeur du grand carré -200px. Puis-je implémenter cette logique en CSS? ou j'ai besoin d'un javascript pour le définir dynamiquement? Je vous remercie.

Answer 1

Est-ce que les carrés dont vous parlez sont supposés être des carrés réels (largeur == hauteur) ou est-ce que vous vous souciez seulement de la largeur et si les rectangles sont corrects? Dans ce dernier cas, cela peut se faire avec css simple:

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

voir en action ici: http://jsfiddle.net/2evFx/