28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Voici mon code :

<div id="centre">
	<div id="colonne_gauche">
		<div id="haut-box">Navigation</div>
		<div id="centre-box"> - Accueil<br /> - etc...</div>
		<div id="bas-box"></div>
	</div>

	<div id="colonne_droite">
		<div id="div-info"><h3>Bioméchanique</h3></div>
		<div id="div-image"><img id="image" src="photos/oeuvres_a_vendre/medium/photo-oeuvre_459d4e6389bbd.jpg" alt="Bioméchanique" /></div>
	</div>
</div>


Et la CSS associée :

#colonne_gauche {
float : left;
width : 215px;
}
#colonne_droite {float : right;}

#image {
border : 2px solid #cd6652;
}

#div-info {
float : left;
}

#div-image {
float : right;
width : 240px;
height : 240px;
}


Sou IE (7) tout se place bien, mais sous firefox, le DIV colonne_droite vient se placer en dessous de la colonne gauche et non pas à sa doite.

pour résoudre le problème sous Firefox, j'ai trouvé 2 solutions :
- préciser un width à #colonne_droite
- supprimer l'image à l'intérieur de #div-image

Peut-on m'expliquer le problème SVP ?

merci !
Modifié par Graph-Site (25 Jan 2007 - 12:18)
Je veux deux explications possibles :
- soit un des flottants contient trop de contenu (texte, par exemple), et sa largeur sera donc trop importante ;
- soit on a affaire un un bug de Firefox, décrit ici. Par contre, c'est étrange, il me semblait qu'IE6 et IE7 avaient le même bug...

Mais en général, pour créer deux « colonnes » de contenu, on n'aura pas besoin de deux flottants mais d'un seul.
Modifié par mpop (06 Jan 2007 - 18:40)
merci pour ta réponse

a écrit :
- soit un des flottants contient trop de contenu (texte, par exemple), et sa largeur sera donc trop importante ;


Ce n'est pas le cas. J'ai essayé de tout virer sauf l'image (qui est largement plus petite que le conteneur) et le bug persiste.


a écrit :
soit on a affaire un un bug de Firefox, décrit ici. Par contre, c'est étrange, il me semblait qu'IE6 et IE7 avaient le même bug...

Merci je vais voir ça !

a écrit :
Mais en général, pour créer deux « colonnes » de contenu, on n'aura pas besoin de deux flottants mais d'un seul.

effectivement... je suis couillon moi Smiley lol
Je vais essayer voir si ça résouds le problème

encore merci Smiley biggrin