[Résolu] 3 colonnes, dans un div en position relative

Bonjour à tous,

j'ai un petit souci qui commence à me prendre la tête. J'ai fait des recherches sur le site et sur google, mais je n'arrive pas à trouver la solution à mon problème ..

voilà ce à quoi je voudrais arriver :



Voici le code de la page :

<div id="over_header"></div>

<div id="bottom_header"></div>

<div id="site">
	<div id="left"> </div>
	<div id="centre"></div>
	<div id="right"></div>
    &nbsp;
</div>

<div id="footer"></div>

voici le css associé :

div#site {
position:relative;
margin:0 auto;
width:980px;
left:50%;
margin-left:-490px;
background-color:#333333;
margin-top:-50px;
color:#FFFFFF;
}

div#left{
position:absolute;
top:0;left:0;
width:300px;
border:1px dashed red;
}

div#centre{
margin-left:300px;
margin-right:auto;
border:1px dashed #00FFFF;
}

div#right{
position:absolute;
top:0;right:0;
width:300px;
border:1px dashed #00FF66;
}

Le probleme que je rencontre est que la div "site" qui contient les 3 autres div ne s'etend pas en hauteur automatiquement lorsque l'une des 3 div augmentent en hauteur, du coup la div en question s'étend en dehors de son conteneur "site"..

Si vous pouviez m'aider là dessus ca serait super. Merci d'avance
Modifié par rafale29 (13 Jul 2007 - 11:24)

Bonjour,

rafale29 a écrit :
Le probleme que je rencontre est que la div "site" qui contient les 3 autres div ne s'etend pas en hauteur automatiquement lorsque l'une des 3 div augmentent en hauteur, du coup la div en question s'étend en dehors de son conteneur "site"..

Ne pas utiliser le positionnement absolu, dans ce cas. Faire un tableau à trois cellules ou utiliser les flottants.

Pour cette dernière solution, voir par exemple: Un design fluide avec trois «colonnes», grâce au positionnement flottant.

rafale29 a écrit :
a moins que vous ayez d'autres solutions?

Arrêter de bidouiller un peu n'importe quoi et commencer par se documenter sur le positionnement en CSS?

Pour commencer:
http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS
Je te laisse aussi consulter les trois articles d'initiation au positionnement CSS sur Openweb (en passant par un moteur de recherche on les trouve facilement).

rafale29 a écrit :
comme mon container "site" est en position relative je dois lui attribuer une hauteur fixe

Non, strictement aucun rapport de cause à effet entre les deux.

rafale29 a écrit :
alors que si je passe le container en absolu d'une part la hauteur s'adapte c'est super

Le fait que la hauteur s'adapte n'a rien à voir avec le fait de positionner ce bloc en absolu.

rafale29 a écrit :
.. mais par contre le footer lui est completement remonté !

C'est parce que tu as positionné ton conteneur en absolu. Pourtant, on avait déjà dit que ça n'était pas adapté pour ce type de mise en page, hein, c'est pas une information nouvelle.

Pour rappel: on n'est pas obligé de choisir entre le positionnement relatif et le positionnement absolu. La valeur par défaut de la propriété position est "static" (pas besoin de la préciser, c'est une valeur par défaut).

Là encore, je crois qu'un détour par les articles indiqués ci-dessus est indispensable.

Mon problème concernant le positionnement en css était principalement du au fait que je suis passé beaucoup trop vite sur cette partie donc forcément je ne pouvais pas du tout maitriser les interactions..ca me servira de leçon lol

Du coup j'ai réussi à trouver la solution

pour le CSS :

div.site {
position:relative;
width:950px;
overflow:auto; /*nécessaire!!!*/
}

div#left {
width:33%;
}

div#right {
float:right;
width:33%;
}

div#centre {
float:right;
width:33%;
}

et pour le html :

<div class="site">
      <div id="right"> ... </div>
      <div id="centre"> ... </div>
      <div id="left"> ... </div>
</div>

Voilà .. si ca peut aider quelqu'un et merci à Florent
Modifié par rafale29 (13 Jul 2007 - 11:29)