SOS: div 3 colonnes
nirianas
Messages postés
11
Statut
Membre
-
nEm3sis Messages postés 722 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.
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
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
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
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.
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.
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>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
