Ajustement du contenu et redimensionnement d'un conteneur div

Question

J'essaie de créer une page configurée comme l'image. A & B sont des hauteurs dynamiques, leurs largeurs sont statiques. C est une taille statique de taille 500px et largeur 500px.

Comment puis-je faire en sorte que la hauteur du contenu de chaque A & B redimensionne l'autre sans dépasser la hauteur de dire 500px

http://i47.tinypic.com/zvyd7d.png

Answer 1

Ajouter ceci au CSS a et b.

max-height:500px;.

Tant que vous échappez vos flotteurs (le cas échéant) correctement, il coupera là-bas.

Vous devrez peut-être ce coupera ajouter

overflow:hidden;

si votre contenu ou b étend 500px, il d'être vu dans la page.

Le code comme terminé, je comprends la question est

Le CSS

#wrap { width: 700px; height:500px; } /* this combines both static widths and height stays dynamic */ 
.a, .b { float:left; background-color:#F03; width: 200px; height:50%; min-height:100px; max-height: 500px; } 
.c { background-color:#990; width: 500px; height: 500px; float: right; } 

HTML

<div id="wrap"> 
    <div class="c">C</div> 
    <div class="a">A</div> 
    <div class="b">B</div> 
<div style="clear:both;"> 
</div> 

Notez que le C est sur le dessus. C'est parce qu'il flotte sur le côté droit du conteneur et le reste essaie de trouver de la place que C ne remplit pas. Couleurs d'arrière-plan juste pour l'aide visuelle.

http://jsfiddle.net/QW5MQ/ < - Ce sont vos amis.