design css à 3 div dont 2 float...problème centrage div milieu avec FF

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : design css à 3 div dont 2 float...problème centrage div milieu avec FF

par johnass » 19 févr. 2008, 18:13

salut
donc trop de choses a regler si tu veux que les colonnes s ajustent
:?
tu devrais allez voir ici

http://www.alsacreations.com/

particulierement ici
http://css.alsacreations.com/Modeles-de ... age-en-CSS

et voir le "concept" de faux columns sous google
et Post-it : CSS Aide-mémoire dans ce forum pour plus de lien

design css à 3 div dont 2 float...problème centrage div mili

par spongy » 19 févr. 2008, 16:59

Bonjour,

Merci à ceux qui pourront m'aider...Même si le sujet en dit beaucoup je vais reprendre :)

Je débute en html et css et j'arrive pas à résoudre un problème sous Firefox malgré les tutoriaux. Je me suis amusé à créer un design bidon pour comprendre le fonctionnement des div et notamment des float. J'ai un div Tout qui contient 3 div devant être centrés Gauche, Centre, Droite dont la taille varie inexorablement suivant la page...

Voici le code de ma page sous dream :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Document sans titre</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { text-align:center; } #T{ background:#CCCCCC; padding: auto; margin: auto; align:center; } #G{ float:left; padding: 0px 10px 0px 10px; margin: 0px 0px 0px 10px; width: 200px; height: 100%; background:#FF0000; } #D{ float: right; padding: 0px 10px 0px 10px; margin: 0px 10px 0px 0px; width: 200px; height: 100%; background:#0000FF; } #C{ padding: 15px 15px 15px 15px; margin: 15px 15px 15px 15px; width: 500px; background:#CC33CC; } </style> </head> <body> <div id="T"> <div id="G">gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche </div> <div id="D">droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite droite</div> <div id="C">centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre </div> </div> </body> </html>
Je ne sais pas si je fais bien...J'obtiens un résultat satisafaisant sous IE mais pas sous FF : le div du milieu ("C") reste collé au div gauche et le contenu se répand sous ce dernier. Que faire pour résoudre le problème ?
Les css, c'est pas tiré par les cheveux par moment ?

:?: