HTML, table : résultat différent dans Explorer et Firox

Bonjour,

Je souhaite obtenir 2 zones rectangulaires, une à droite et une à gauche de la page.
La zone de gauche a une hauteur minimale.
La zone de droite a une hauteur variable en fonction du contenu.
Je voudrais que la zone de gauche prenne la même hauteur que la zone de droite si celle ci a une hauteur supérieure à la hauteur minimale de la zone de gauche.

Pour cela j'utilise un tableau comme celui-ci:

<table style="width:100%"> 
   <tr style="height: 100%; min-height: 100%;">
      <td style="width: 30%;height: 100%; ">
           <div style="background-color: #BE000C; height: 100%; min-height: 100px;"></div>
      </td>
      <td style="width: 70%;">
           <div style="background-color: #000066; height: 200px;"></div>
      </td>
   </tr>
</table>    

J'ai mis des div dans le tableau pour simuler un contenu.

Avec Mozilla Firefox j’obtiens un résultat correct (2 zones de hauteur identique).
Dans Internet Explorer le résultat ne correspond pas à mes attentes : la zone de gauche ne prend pas la même hauteur que la zone de droite !?

Y a t il une explication ?
Y a t il une solution pour Internet Explorer ?
Modifié par 6l20 (05 Nov 2014 - 17:42)

Hello lolo40,

Je n'en suis pas sûr mais je pense que ça vient du height 100% posé sur ta div.

Par contre, pourquoi faire un tableau ?
En HTML 5, nous faisons de l'accessible et du sémantique. Utiliser un tableau pour la mise en forme revient à des époques ancestrales (ok j'exagère un peu ^^).

Tu peux très bien avoir le même rendu avec des divs en utilisant des display table (http://www.alsacreations.com/tuto/lire/1523-le-modele-tabulaire-en-css.html) ou les flex (http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html). Tout dépend des navigateurs que tu dois supporter.

Comme tu peux le voir, tu as de très bons articles sur Alsacréations

Bonne journée

Merci pour les conseils.

Je m'en sors en faisant ceci:

<div style="display: table-cell">
   <div style="min-height: 400px;">
     ...
   </div>
</div>
<div style="display: table-cell">
   ...
</div>

* Merci d'utiliser les balises de colorisation syntaxique pour faciliter la lecture de vos messages
Modifié par 6l20 (05 Nov 2014 - 17:44)