Se connecter / S'enregistrer
Votre question

Problème d'alignement de trois <div>

Tags :
  • CSS
  • Programmation
Dernière réponse : dans Programmation
5 Juin 2010 22:28:40



Bonsoir !

Voilà, j'ai un petit soucis, je souhaiterai créer un site sans tableaux, et avec trois div: A B et C.
J'aimerai avoir la disposition suivante:



rose: div A
rouge: div B
bleu: div C

Voici mon code html :


<div id="AB">
<div id="A">

</div>
<div id="B">
</div>
</div>
<div id="C">
</div>




Ainsi que le bout CSS correspondant:


#A{
background-color:#F69;
width:100px;
height:100px;

}

#B{
background-color:#C00;
width:100px;
height:100px;
}
#C{

width:300px;
height:200px;
background-color:#0CF
}
#AB{
width:100px;
height:200px;
float:left;
}



A noter que sous dreamweaver, l'affichage généré est correct, mais une fois sous FF ou IE, tout est disposé verticalement =(

Quelqu'un pourrait-il m'aider?

Merci!
Répondre Retirer de la liste des messages cités Ajouter à la liste des messages cités Edition rapide Editer le message

Autres pages sur : probleme alignement trois div

a c 232 L Programmation
6 Juin 2010 01:36:57

Salut,

On n'a pas accès à l'image, mais j'imagine que tu veux un truc avec deux colonnes et un footer en dessous.
Le float:left est plutôt à appliquer à #A et #B plutôt qu'a #AB.
Ensuite, il te faut un clear:left (ou clear:both) à #C pour qu'il se place en dessous.
m
0
l
6 Juin 2010 11:46:32

Bonjour,

  1. <div id="contenu">
  2. <div id="col1">
  3. </div>
  4. <div id="col2">
  5. </div>
  6. </div>


CSS:

  1. #contenu {
  2. width: 800px;
  3. margin: 0 auto;
  4. }
  5.  
  6. #col1 {
  7. width: 200px;
  8. float: left;
  9. }
  10.  
  11. #col2 {
  12. width: 600px;
  13. float: left;
  14. }
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS