Bon, je veux pas être brutal, mais quand même ce CSS c'est un foutu bricolage
Le problème semble être causé (même si je ne sais pas comment...) par le positionnement en relatif du bloc #coldroite.
La solution : virer ce positionnement en relatif qui ne sert strictement à rien. Ou alors il y a quelque chose qui m'a échappé... Mais franchement, je ne vois pas trop à quoi ça pouvait servir...
Je propose une version commentée de ta feuille de style (lorsque l'instruction elle-même est commentée, c'est qu'elle est inutile...) :
body {
margin: 0;
background-color: #F5F5F5;
text-align: center;
}
#conteneur {
margin: 2px auto;
text-align: left;
width: 750px;
background-color: #FFF;
padding: 0 10px;
}
#header{
/*position:relative; /* utilité ? */
height:85px;
width:100%;
border-bottom: #AFAFAF 1px solid;
background: #FFFFFF;
/* RAJOUT */ padding-top: 1px; /* permet d'éviter la fusion des marges avec l'élément enfant */
}
#header .titre {
font-family: Arial, Helvetica, sans-serif;
font-size: 21px;
color: #CCCCCC;
position: relative;
margin: 57px 0 0 120px; /* Ici, la marge du haut va porter non pas sur .titre mais sur #header, suite à la fusion des marges... On évite le problème en rajoutant l'instruction ci-dessus */
padding-top: 1px;
}
div#contenu {
/*position: relative; /* utilité ? */
/*width: 100%; /* contredit par un width: 750px; un peu plus bas... */
/*float: left; /* pourquoi faire ?*/
}
#contenu {
/*width: 750px; /* par défaut, un bloc prend toute la largeur disponible. Ici, on a 750px de disponible au sein de #conteneur, pas la peine d'en rajouter une couche ! */
/*text-align: left; /* On l'a déjà précisé dans #conteneur, donc ça ne sert pas à grand chose... */
padding: 0 0 10px 0;
margin: 0 0 10px 0;
font-size: 100% /*!important*/; /* Cf remarque juste en dessous */
/*font-size: 76%; /* Ça c'est gentil de rendre le texte illisible sur IE... */
}
#coldroite {
float: right;
width: 470px;
/*display:inline; /* hein?!? pourquoi mettre un bloc en display:inline; ? */
/*position: relative; /* utilité, à part provoquer un bug de rendu ? */
}
#cont_coldroite {
/*padding: 0; /* inutile, c'est déjà la valeur par défaut... */
/*margin: 0; /* inutile, c'est déjà la valeur par défaut... */
}
#droite_gauche {
width: 230px;
float: left;
/*margin: 0; /* inutile, c'est déjà la valeur par défaut... */
padding: 30px 0 0 0;
}
#droite_gauche h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #990099;
margin: 12px 10px 2px 10px;
}
#droite_gauche p {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
text-align: left;
margin: 4px 10px 10px 10px;
}
#droite_droite {
margin: 10px 0 0 240px;
padding: 25px 10px 0 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #CCFFFF;
}
#droite_droite p {
border: 1px solid #AFAFAF;
margin: 5px 0;
padding: 6px 12px;
}
#droite_droite a {
text-decoration: none;
color: #00AECE;
}
#droite_droite a:hover {
text-decoration: underline;
color: #0C7389;
}
#maitre_gauche {
/*margin: 0; /* c'est déjà la valeur par défaut... */
width: 270px;
float:left; /* ce qui fait que le bloc "flotte" au dessus de son conteneur, et ne rentre plus dans le calcul de la hauteur du conteneur */
}
#colgauche1 {
width: 270px;
height: 290px;
/*position:relative; /* Rappel: le positionnement par défaut est en "static"... l'abus de "relative" nuit gravement à la santé, ou alors ne sert à rien... */
background-color: #F5F5F5;
}
Une fois tout ça réglé, il reste dans Firefox, Opera, Safari, Konqueror et les autres (sauf IE) un problème visuel de couleur de fond qui ne s'étend pas. C'est un comportement normal, et la solution se trouve par là :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent.html Modifié par mpop (16 Mar 2006 - 01:02)
