Maquillages difficiles avec blocs élastiques centrés

Question

J'ai 3 blocs: un emballage et 2 autres à l'intérieur de l'emballage. Les blocs intérieurs ont la même taille.

Le wrapper est élastique et sa largeur est modifiée pendant le redimensionnement de la fenêtre. 2 blocs à l'intérieur de l'emballage sont également élastiques. Chacun de ces 2 blocs internes a une propriété min-width.

Lorsque l'emballage est suffisamment large, les blocs internes sont placés l'un après l'autre sur une ligne. Mais lorsque l'emballage devient trop étroit, les blocs sont placés sur 2 lignes.

Le but final que vous pouvez voir sur l'image ci-dessous:

alt text http://img155.imageshack.us/img155/9006/nessview.png

Moment important: comme vous pouvez le voir sur le troisième bloc, lorsque les blocs sont positionnés en 2 lignes ils sont Alined au centre. Question: est-il possible de faire ce maquillage en utilisant juste html et CSS?

Answer 1

Quelque chose comme cela fonctionne dans IE 7 & FF 3 pour moi:

<div style="width: 49%; min-width: 300px; float: left; background: red;">Test</div> 
<div style="width: 50%; min-width: 300px; float: left; background: blue">Test</div> 

Le problème est qu'il ne sera pas Centrer quand rétrécie, et IE 6 min largeur déteste.

Toujours à la recherche en alignement du centre ...

Firefox uniquement:

<div style="text-align: center"> 
    <div style="display: inline-block; width: 49%; min-width: 300px; margin: 0 auto; background: red;">Test</div> 
    <div style="display: inline-block; width: 50%; min-width: 300px; margin: 0 auto; background: blue;">Test</div> 
</div> 

Answer 2

Si je comprends bien votre question, vous voulez que la boîte outter de ne jamais devenir si étroite, que les deux à l'intérieur sont positionnés les uns sur les autres?

Mettez également la largeur minimale sur la boîte de départ, qui est égale à la largeur minimale, au rembourrage, à la marge et aux bordures des deux points intérieurs. Vous pouvez prétendre ainsi avoir la largeur min dans IE6, de cette façon:

min-width: 200px; 
width: auto!important; 
width: 200px; /* The last one will be used by IE6 (as min-width), the !important one by standards compliant browsers */ 

devrait également travailler avec min-hauteur.