J'ai du mal pour mettre 2 div alignés

23 décembre 2005 à 0:50:31

Salut!

Alors voilà, regardez cette image : Image utilisateur

Vous voyez, les 2 div (equipement et drogues) ne sont pas aligné Image utilisateur

Comment faire alors pour les aligner?

Code HTML

<div class="titre">Votre inventaire :</div><br />

<div class="equipement">
<span class="conn">Equipements</span><br /><br />
Arme : <? echo $donnee['arme'] ?> <br />
Protection : <? echo $donnee['armure'] ?><br />
Munitions : <? echo $donnee['balle'] ?><br />
</div>

<div class="drogue">
<span class="conn">Drogue</span><br /><br />
Shit : <? echo $donnee['drogue1'] ?> <br />
Beuh : <? echo $donnee['drogue2'] ?><br />
H : <? echo $donnee['drogue3'] ?><br />
Poudre : <? echo $donnee['drogue4'] ?><br />
'XtrM : <? echo $donnee['drogue5'] ?><br />
</div>

Le code CSS :

.titre
{
font-size:14px;
color:#666666;
text-align:center;
font-weight: bold;
}

.equipement
{
text-align: center;
width:150px;
position: relative;
left:10px;
top:0px;
background-color: #d6f0ff;
font-size: 10px;
border: 1px solid #94d8ff;
padding:10px;
}

.drogue
{
text-align: center;
position: relative;
left:130px;
top:0px;
width:140px;
background-color: #d6f0ff;
font-size: 10px;
border: 1px solid #94d8ff;
padding:10px;
}

Merci à ceux qui pourront m'aider =)

YoOp

23 décembre 2005 à 1:35:16

Ta essayé avec la technique du float ?
Le positionnement flottant permet de positionner un élément de gauche ou à droite dans son parent.

Kiro51

23 décembre 2005 à 1:44:28

Oui j'ai essayer, mais en fait avec float, ca allonge pas la partie grise (derriere les 2 blocks au fond bleu) et donc elle est pas assez longue et les cadre bleu se retrouvent par dessus la bordure en bas du cadre gris...

(j'espere que vous me comprenez XD)

jp949

23 décembre 2005 à 6:06:07

la partie grise il faut la definir en css lui donner une largeur et hauteur un positionnement si la hauteur doit etre variable "auto"
Tu places un div supplementaire apres les 2 flottants avec ces prpopriété
#spacer {width:100%; height:0; clear:both;}