SOS: div 3 colonnes

nirianas Messages postés 11 Statut Membre -  
nEm3sis Messages postés 722 Statut Membre -
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 Messages postés 30 Statut Membre 17
     
    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
  2. nirianas Messages postés 11 Statut Membre
     
    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
  3. nEm3sis Messages postés 722 Statut Membre 113
     
    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
  4. nirianas Messages postés 11 Statut Membre
     
    Slt nEm3sis,

    Merci pour ton aide et pour le code. Je vais tester.
    0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. Benno Messages postés 153 Date d'inscription   Statut Membre 112
     
    Tu peux également essayer d'ajouter le propriété 
    float:left;

    dans celles de chaque div verticale.
    0
  7. nEm3sis Messages postés 722 Statut Membre 113
     
    sauf que le float est horizontale et ne résout pas le problème du vertical
    0