28172 sujets

CSS et mise en forme, CSS3

[Résolu] Elargissement marge gauche du container sous IE

Bonjour à tous,

Suite à quelques recherches sur ce site et un probleme toujours non resolu, je me tourne vers vous pour voir si vous pouvez m'aider.

Voici mon probleme :

A partir d'un cabarit de page trouvé dans la trousse a outils, j'ai construit un site en 3 colonnes, à largeur flexible (avec une largeur minimale et maximale) :
- Les largeurs des colonnes de gauche et de droite sont fixes
- La largeur de la colonne centrale est variable

J'ai utilisé un 
float:left
et 
float:right
pour positionner les colonnes de gauche et de droite, ainsi qu'un 
clear:both
sur le footer. Ainsi, la colonne la plus longue "pousse" le footer vers le bas.

Mes trois colonnes sont inclues dans un container dont voici les propriétés :

#conteneur {
min-width: 904px;
width: expression(document.body.clientWidth < 934 ? "934px" : "auto" );
max-width: 1130px;
width: expression(document.body.clientWidth > 1150 ? "1150px" : "auto" );
margin: 0px auto;
padding: 0 45px 0 45px;
background-color: #666666;
}


Le probleme est que lorsque ma colonne de droite et plus longue que ma colonne centrale, la marge gauche de mon container s'agrandi.
Le probleme se pose uniquement sous IE (pas sous FF).
Le probleme ne se presente pas si c'est ma colonne de gauche qui est plus longue que ma colonne centrale.

J'espere que vous pourrez m'aider à resoudre ca.
Si j'ai oublié de préciser des elements, n'hesitez pas a me demander.

Merci d'avance
Smiley smile
Modifié par eres (01 Jul 2008 - 17:10)
Bonjour eres et bienvenue Smiley smile ,

ce serait plus simple de nous donner directement le code complet reproduisant l'erreur plutôt que de nous laisser chercher dans les gabarits celui que tu as pris comme base (d'autant plus que celui auquel je pensais à un position: absolute; sur le #conteneur) Smiley rolleyes !

Par ailleurs, il y a une confusion dans tes css car la technique pour simuler le min-width et max-width est réservé à IE < 7 et devrait être placée dans des commentaires conditionnels.

A+
Bonjour et merci de m'avoir répondu aussi rapidement.

Voici un extrait de mon code HTML, j'ai supprimé tout ce qui n'était pas utile (je pense)

<body>
    <div id="conteneur">
    <div id="border">

      <div id="header">…</div>
  
      <div id="left">… </div>
	  
      <div id="right">… </div>
	  
      <div id="centre">… </div>
	  
      <div class="clearer"> </div>
	
      <div id="footer" align="center">…</div>
    
    </div>

	<div id="address" align="center">…</div>
    
    </div>

</body>


De meme pour la feuille de style :

/*** Let's Set Everything to Zero ***/
html,body,p,div,img,li,ul,dl,dd,dt,form,form,noscript{
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
border:0;
border-spacing:0;
}
input,select{
margin:0;
padding:0;
}
body {
margin: 0; 
background: #FDF9F0;
padding:0;
color: #202020;
font-family: Arial, Helvetica, sans-serif;
font-size: 80%; 
}
p {margin: 0 0 10px 0;}

/* Page */
#conteneur {
min-width: 904px;
width: expression(document.body.clientWidth < 934 ? "934px" : "auto" );
max-width: 1130px;
width: expression(document.body.clientWidth > 1150 ? "1150px" : "auto" );
margin: 0px auto;
padding: 0 45px 0 45px;
background-color: #666666;
}
#border {
background-color: #FF00CC;
border: 1px solid #CFCFCF;
}
div.clearer {clear: left; line-height: 0; height: 0;}
/* End Page */

/* Top */
#header {
height: 118px;
background-image:url(../images/bg-top.gif);
background-repeat: repeat-x;
background-color: #6666FF;
margin:0;
padding:0;
}
/* End Top */

/* Content */
#centre {
padding: 0;
margin-left: 245px;
margin-right: 275px;
background-color: #6600CC;
}

#left {
float:left;
width: 205px;
padding: 0 0 0 15px;
background-color:#FF99CC;
}

#right {
float:right;
width: 235px;
padding: 0 15px 10px 0;
background-color: #66FFFF;
}
/* End Content */

/* Footer */
#footer {
padding: 2px 0 5px 0;
clear:both;
background-color: #242424;
color: #FFFFFF;
}
#address {
font-size: 0.9em;
margin: 3px 0 8px 0;
}
/* End Footer */


Concernant les largeurs minimale et maximale, je dois m'occuper de corriger le probleme mais je ne sais pas extactement comment cela fonctionne. J'ai repris un code mais apparement il n'était pas bon.

Merci d'avance
Modifié par eres (01 Jul 2008 - 15:19)
Hello,

à priori il s'agit d'un problème de débordement des flottants. Pour le régler tu peux par exemple ajouter :
#border {
overflow:hidden;
}

Pour les min-width et max-width il suffit de regarder les 2 liens que je t'ai donné plus haut Smiley cligne .

A+
Bonjour,

Merci pour l'explication et les liens.
J'ai utilisé le code conseillé mais cela ne voulait pas fonctionner.

J'ai finalement remplacé le 

<div class="clearer">&nbsp;</div>


par un 
<br clear="all" />


et cela fonctionne.

Merci de m'avoir aidé ! Smiley smile
Modifié par eres (01 Jul 2008 - 17:07)
Oui je le considère comme résolu, j'ai deja mis le tag dans le titre.
Est ce que je dois faire autre chose ?
eres a écrit :
Oui je le considère comme résolu, j'ai deja mis le tag dans le titre.
Est ce que je dois faire autre chose ?
Oups ! Non... c'est bon eres ! Je me suis trompé de sujet en répondant Smiley cligne !
Sujet clos
Aller à