28120 sujets

CSS et mise en forme, CSS3

Bonjour,
j'ai un petit problème récurent avec la propriété Float sur mes sites : les blocs flottants sont mal interprétés par IE6 et ça me pose de serieux problèmes pour positionner un background :

<div id="left">
du texte du texte du texte du texte du texte
</div>

<div id="right">
du texte du texte du texte du texte du texte
</div>


Le conteneur #left flotte à gauche

[b]div#left [/b]{
float:left;

width:600px;
height:100%;

margin:0;
padding:0;
}

[b]div#right[/b]{
margin:0;
padding:0;

background-image:url(design/news.gif);
background-position:left;
background-repeat:no-repeat;
}


le bloc #right est décalé à droite du bloc #left sous IE. Sous FF et Opéra, c'est seulement le contenu du bloc (texte, images...) qui est décalé.
Donc un positionnement du background à left; n'a évidemment pas du tout le même résultat

Je rajoute donc un margin-left:600px à mon bloc #right pour que le bloc #right ait le même comportement partout. De cette manière FF et Opéra imitent ce que fait IE... là ça marche mais cette bidouille me plait pas trop.
J'imagine que ce bug est bien connu mais je ne trouve pas d'astuces spécifiques à mon cas.

donc si vous avez des idées ...
merci ! Smiley smile
Modifié par Cano (01 Nov 2007 - 13:48)
Bonjour,
As tu essayé, un conteneur avec une largeur donnée avec à l'intérieur tes 2 div qui se partage la largeur en float left et float right ?
c'est ça ! tout simplement avec float right et en fixant les largeurs des deux blocs dans le bloc principal. Merci beaucoup Smiley cligne