SOS: div 3 colonnes

nirianas Messages postés 11 Date d'inscription   Statut Membre Dernière intervention   -  
nEm3sis Messages postés 710 Date d'inscription   Statut Membre Dernière intervention   -
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.

6 réponses

Réponse 1 / 6
Charlingals1 Messages postés 30 Date d'inscription   Statut Membre Dernière intervention   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
Réponse 2 / 6
nirianas Messages postés 11 Date d'inscription   Statut Membre Dernière intervention  
 
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
Réponse 3 / 6
nEm3sis Messages postés 710 Date d'inscription   Statut Membre Dernière intervention   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
Réponse 4 / 6
nirianas Messages postés 11 Date d'inscription   Statut Membre Dernière intervention  
 
Slt nEm3sis,

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

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

Posez votre question
Réponse 5 / 6
Benno Messages postés 151 Date d'inscription   Statut Membre Dernière intervention   112
 
Tu peux également essayer d'ajouter le propriété 
float:left;

dans celles de chaque div verticale.
0
Réponse 6 / 6
nEm3sis Messages postés 710 Date d'inscription   Statut Membre Dernière intervention   113
 
sauf que le float est horizontale et ne résout pas le problème du vertical
0