Sujet Précédent Sujet Suivant

SOS: div 3 colonnes

Fermé
nirianas Messages postés 11 Date d'inscription samedi 2 août 2008 Statut Membre Dernière intervention 19 septembre 2008 - 8 août 2008 à 10:25
nEm3sis Messages postés 710 Date d'inscription lundi 20 août 2007 Statut Membre Dernière intervention 9 avril 2012 - 8 août 2008 à 13:17
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 lundi 5 mars 2007 Statut Membre Dernière intervention 11 août 2008 17
8 août 2008 à 10:53
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 samedi 2 août 2008 Statut Membre Dernière intervention 19 septembre 2008
8 août 2008 à 11:19
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 lundi 20 août 2007 Statut Membre Dernière intervention 9 avril 2012 113
8 août 2008 à 11:54
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 samedi 2 août 2008 Statut Membre Dernière intervention 19 septembre 2008
8 août 2008 à 12:44
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 jeudi 1 mars 2007 Statut Membre Dernière intervention 13 avril 2009 112
8 août 2008 à 12:53
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 lundi 20 août 2007 Statut Membre Dernière intervention 9 avril 2012 113
8 août 2008 à 13:17
sauf que le float est horizontale et ne résout pas le problème du vertical
0