SOS: div 3 colonnes

nirianas -  
Bonjour,

Qui peut m'aider?
Je veux avoir 3 colonnes div, qui se partagent comme suit:
- 1 sur la gauche,
- 1 sur la droite,
- et le dernier se touve au milieu et il se place au dessus des 2 div (il est flottant et z-index plus elevé).
Le problème c'est que j'arrive pas à aligner la colonne droite sur la même hauteur que les 2 autres.

Voici le code html:

<div id="container">

<div class="left">gauche</div>
<div class="right">droite</div>
<div class="div_superpose">je flotte au centre</div>

</div>

Voici le css:

.container{
width:900px;
height:auto;
margin:0;
top:0;

}

.left{
width:700px;
height:163px;
margin:0;
top:0;
background:#33FF00;
}

.right{
width:150px;
height:163px;
margin:0;
top:0;
background:#FFFF00;
}

.div_superpose {
width:150px;
margin:auto;
position:absolute;
z-index:2;
margin-left:550px;
margin-top:220px;
top:0;
background:#FF9900;
}

Comment pourrais-je ajouter dans le code pour que les 3 div soient sur la même hauteur, et leur height soit extensible (le witdh reste fixe)?

Merci a vous, merci pour le forum.
Configuration: Windows XP
Firefox 2.0.0.16

6 réponses

  1.  Charlingals1
    Bonjour,

    Je sais si ce que je vais teu proposer fonctionne mais retire les propriété Height de te class CSS left et right et rajoute left = 0 dans left et right = 0 dans right

    voila
    Dis moi si sa marche

    Cordialement
    0
    1. nirianas Auteur
      Re Charlingals1,

      J'ai enlevé les height, j'ai dejà ajouté le left:0; et le right:0; Mais il ne se passe rien, mon bloc right reste sur le bas et ne s'aligne pas encore avec les deux autres blocs.

      Merci à vous.
      0
      1. nEm3sis
        tu peux tester ça 
        <style type="text/css">
.div2{
	border-style:solid;
	border-color:red;
	width:60%;
	position:absolute;
	top:10%;
}
.div{
	border-style:solid;
	width:20%;
	position: inherit;
}
</style>
<div class="div2">
	<div class="div" style="left:20%">1</div>
	<div class="div" style="left:40%">2</div>
	<div class="div" style="left:60%">3</div>
</div>
        0
        1. nirianas Auteur
          Slt nEm3sis,

          Merci pour ton aide et pour le code. Je vais tester.
          0
          2. Benno
            Tu peux également essayer d'ajouter le propriété 
            float:left;

            dans celles de chaque div verticale.
            0
            1. nEm3sis
              sauf que le float est horizontale et ne résout pas le problème du vertical
              0