Bonjour,
Je veux faire un truc tres tres simple,
- un bloc en haut a gauche de ma page
- un bloc en haut a gauche de ma page
- un 3eme bloc en dessous qui prend toute la largeur de la page et decale de x pixels par rapport au haut de la page.
Moi, betement, je fais une div float gauche, une div float droite et une div avec une marge top de 50 px.
C'est tout beau avec IE mais incroyable sous firefox, les float sont A L'INTERIEUR du div de texte
J'ai trouve des solutions de contournement, mais j'ai peur de passer a cote d'une notion fondamentale, alors si une bonne ame peut m'expliquer le pourquoi de la difference.
Voici mon code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>test js carnet 3</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" type="text/css" href="./conf/stylesheet/template_courant/styles.css" media="screen" title="Defaut"/> </head> <body> <div class="floatgauche"> TOTO TEXTE DU BLOC FLOTTANT HAUT GAUCHE </div> <div class="floatdroit"> TUTU TEXTE DU BLOC FLOTTANT HAUT DROIT </div> <div id="cadreprincipal"> TEXTE DU BLOC PRINCIPAL - TEXTE DU BLOC PRINCIPAL - TEXTE DU BLOC PRINCIPAL - TEXTE DU BLOC PRINCIPAL - TEXTE DU BLOC PRINCIPAL - </div> </body> </html>
Et mon css:
* {margin:0;} div#cadreprincipal{ background-color:#B2BBD4; margin-top:50px; } .floatdroit{ background-color:#FF5F1F; float:right; } .floatgauche{ background-color:#FF5F1F; float:left; }
et le rendu sur les navigateurs:
Firefox
IE
Impossible de comprendre pourquoi sur Firefox, mes deux boites flottantes (en haut a gauche et en haut a droite) sont decalees de la valeur de la marge que je specifie pour la boite "cadreprincipal".
Tout se passe comme si j'avais declare mes flottants dans la boite "cadreprincipal", or ce n'est pas le cas.
Merci
Sylvain
