[Résolu] Problème pour aligner 3 div

Bonjour à tous,
Je suis débutant en CSS et je commence à coder mes designs.
J'ai un problème cependant, j'essaye de rendre mon design extensible en largeur.

Je fais 3 div, mais je n'arrive pas à les aligner. Avec le code actuel, il me les met l'une en dessous de l'autre.

Voila mon code :

 <div id="logo">
   
   <!-- fin div logo-->
   </div>
   
   <div id="header_x">
      
   
   <!-- fin div header_x-->
   </div>
   
   <div id="header_end">
   
   <!-- fin div header_end-->
   </div>

#logo {
background-image:url(images/logo.gif);
background-repeat:no-repeat;
width:213px;
height:157px;
}

#header_x {
background-image:url(images/header_x.gif);
background-repeat:-x;
width:700px;
height:157px;
}

#header_end {
background-image:url(images/header_end.gif);
background-repeat:no-repeat;
width:19px;
height:157px;
}

Merci pour votre aide
Modifié par Myx (16 Jul 2006 - 13:38)

Bonsoir et bienvenue sur Alsacréations.

Dans le flux normal, les éléments de type bloc s'affichent effectivement les uns en dessous des autres. Le positionnement flottant permet de retirer un élément du flux normal afin de le placer le plus à gauche ou le plus à droite possible dans son conteneur.

Dans le cas présent, le fait de rajouter la propriété float: left; à chacun des éléments permet d'obtenir l'effet escompté.

Il est également possible de faire flotter le logo à gauche avec un float: left;, la partie droite du côté opposé du header avec un float: right; et alors d'indiquer des marges égales aux dimensions de ces deux éléments pour la partie centrale. Cette solution est notamment utilisée pour des modèles de mise en page Alsacréations. Attention, la partie centrale se situe alors en dernier dans le code XHTML.

Bonsoir et merci pour votre réponse
J'ai rajouter float:left a chacun des éléments, tout marche.
Merci beaucoup pour l'aide !