[DIV] Table avec width à 100%

**windmastr26** · 14/11/2009, 14h16

Salut le monde !

Je suis tombé par hasard sur un article qui fait état de la mise en forme de sites avec du css. Jusqu'à présent, je présentai mes sites de cette façon :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<TABLE width='100%'>
 <TR>
  <TD>Rubriques de gauche</TD>
  <TD>Rubrique centrale, en général le contenu</TD>
  <TD>Rubriques de droite</TD>
 </TR>
</TABLE>

Mais voilà, visiblement cette méthode ne semble pas être compatible avec tous les supports, et je dois avouer avoir été impressionné en désactivant la feuille de style de certains sites, et en voyant que les rubriques avaient été positionnées en css. Et même sans feuille de style, le site reste lisible ! Ce qui n'est pas le cas des miens

Bref ! Je me suis donc lancé pour me mettre à jour :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<HTML><HEAD><STYLE ...>
div#colonneGauche {
  float:left;
  width:200px;
  margin:7px;
}
 
div#colonneDroite {
  float:right;
  width:210px;
  margin:7px;
}
 
div#colonneCentre {
  overflow:hidden;
  margin:7px;
  margin-left:215px;
  margin-right:235px;
}
</STYLE>
</HEAD>
<BODY>
<DIV id='colonneGauche'>Rubriques de gauche</DIV>
<DIV id='colonneDroite'>
 <TABLE width='100%' style='background:yellow'>...</DIV>
</DIV>
<DIV id='colonneCentre'>Rubriques de droite</DIV>

</BODY></HTML>

Seulement voilà : comme d'habitude c'est le rêve sous firefox, mais pas sous IE où mon "TABLE" dans la colonne centrale prend 100% de la page, et non du div...

Comment dois-je m'y prendre pour remédier à cela ?

De plus, je suis obligé de spécifier des tailles de marges dans la classe "colonneCentre" alors que si je ne les spécifie pas tout marche bien sous firefox...

Merci pour toute aide qu'on pourra m'apporter

**windmastr26** · 14/11/2009, 15h20

Problème résolu en appliquant un "width:100%" à ma classe "div#colonneCentre".

Attention cependant : ceci pose problème pour firefox, il faut donc rajouter un commentaire conditionnel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<!--[if IE]><style type="text/css">     
div#colonneCentre { 
  width:100%;
} 
</style><![endif]-->

[DIV] Table avec width à 100%

Tableau en CSS

Discussions similaires

Partager

Partager