18073 sujets

Questions générales et questions de débutants

[CSS] Problème de boîte dans des boîtes (div dans div)

Voilà, je galère sur des div dans des div et pour une fois IE affiche ce que je veux et pas Firefox.

Voici le code de la page :
<div class=conteneur>
<div class=col20>contenu de la première colonne</div>
<div class=col80>contenu de la deuxième colonne</div>
</div>

Voici le CSS (simplifié) :

div.conteneur { 
background-color: yellow;
position: relative;
width: 100%;
border-top: 1px solid #800000; 
margin: 0;
padding: 5px;
clear: both; 
}

.col20 { display:block; background-color: red; float:left; clear:right; width: 20%;   margin:0; padding:0; text-align: center;  }
.col80 { display:block; background-color: green; float:left; clear:right; width: 80%;   margin:0; padding:0; text-align: center;  }


Je n'ai mis ici que les colonnes 80 et 20 mais il y en a d'autres.

Mon but : faire des tableaux en div (pour résumer).

Mon problème :
- sous IE : aucun ; conteneur a une hauteur de [la plus haute des div qu'il contient] + padding de 5 en haut et en bas
- sous firefox : la merdasse ; conteneur a une hauteur d'une ligne donc col20 et col80 déborde et le padding n'est pas respecté (ce qui fait très laid avec le border)

Avez vous une idée du problème ?


Merci d'avance
J'ai appelé conteneur à tord : son nom devrait être "ligne".
Ce n'est pas un conteneur a proprement parlé mais une ligne de mon tableau flottant.

Voici un exemple de code : 

<div class=conteneur>
<div class=col20>contenu de la première colonne ligne 1</div>
<div class=col80>contenu de la deuxième colonne ligne 1</div>
</div>
<div class=conteneur>
<div class=col20>contenu de la première colonne ligne 2</div>
<div class=col80>contenu de la deuxième colonne ligne 2</div>
</div>


Une autre idée ?
Modifié par moorf (29 Jun 2006 - 10:22)
Re !

D'après ton code html, ta "ligne" contient bien tes deux colonnes.
C'est bien çà ?

Donc en mettant ta "ligne" en position absolute (au lieu de relative), tu obtient la même chose sous FF que sous IE.

@ ++
Oui mais si j'ai plusieurs lignes elles se superposent... donc ca marche pas en absolute.
Je me réponds à moi-même :

mettre le conteneur en float:left...

ok ok : je suis une buse...


bonne journée et merci
Sujet clos
Aller à