[résolu]2 div relative alignés ? possible ?

Bonjour a tous,

j'ai parcouru déjà le moteur de recherche du site mais je n'ai pas trouvé mon bonheur alors je viens me tourner vers vous et savoir.

J'ai plusieurs div conteneur en position relative

global qui contient le header
global2 qui contient une colone a gauche et un bloc de texte ou j'inclus mes pages
global3 qui contient le footer.

le tout dans un grand div en relative de 990px centrer avec margin-left/right en auto.

header pas de probleme
footer non plus

tout mon probleme est dans le global 2 donc je décompose maintenant celui ci
voici donc les CSS qui y correspondent :

#corps_global2 { position:relative; width:990px; margin-left:auto; margin-right:auto;z-index:50;}

puis dans ce global2 il y a un content_includes_global qui contient lui meme une colone a gauche et un content_include pour les pages
voir les CSS :

/* contient la colone gauche et le div pour les includes*/
#content_includes_global {position:relative; width:990px; background-color:#ebebe8; z-index:49;}

#column_left { position:absolute; left:0px; top:0px; width:230px; min-height:360px; background-color:#ebebe8; z-index:50; padding:10px; }

#content_include { position:relative; left:260px; min-height:460px; width:680px; background-color:#ebebe8; z-index:49;}

Voila tout ceci marche d'ailleur tres bien ! mon footer dans le global3 est en relative et suit bien quand le contenu dans content_include s'allonge.
Le probleme aujourd'hui c'est que parfois ma colone gauche est plus longue que mon content_include et la c'est le drame car la colone gauche passe sous le footer qui n'est pas repoussé par elle !

L'idéal serait donc que ma colone ET mon content_include soient tous les 2 en relatif pour que la longeur ne soit plus un probleme et que le footer soit bien a sa place a la suite !

Merci d'avance pour votre aide !
Modifié par Ankart (25 Feb 2011 - 12:29)

Bonjour,

Ton code n'est pas évident à déchiffrer sur iTruc, mais j'ai l'impression qu'il complique beaucoup les choses.

Je ne peux que te conseiller d'aller dans la section "apprendre" du site et de jeter un œil au gabarits de mise en page de Florent que tu trouvera dans les "outils". Tu y trouvera un gabarit qui devrait te convenir.

Laurie-Anne a écrit :
Bonjour,

Ton code n'est pas évident à déchiffrer sur iTruc, mais j'ai l'impression qu'il complique beaucoup les choses.

Je ne peux que te conseiller d'aller dans la section "apprendre" du site et de jeter un œil au gabarits de mise en page de Florent que tu trouvera dans les "outils". Tu y trouvera un gabarit qui devrait te convenir.

Merci pour ta reponse cependant je connais mes bases et l'architecture du site est bien plus complexe je l'ai simplifier et clarifier pour ne garder que l'element important qui nous concerne et qui n'est pas lier directement aux autres.
Meme si comme tu le souligne les gabarit sont tres bien , ici c'est un CMS entierement developper par ma société et il y a beaucoup de code gerer derriere.

Aujourd'hui j'ai plus besoin d'une assistance réelle car je dois adapter et non refaire toute la feuille de style pour rendre certaine fonctions opérationnelles.

Nouvelle journée des esprit plus clair ! belle maniere de faire remonter mon post n'est ce pas ! toujours sur mon problème alors si une âme charitable arrive a résoudre celui-ci !

La solution des colonnes factices devrait répondre à ton problème non ?

Par exemple, ce gabarit semble proche de ta structure.

Effectivement la structure est tres bonne mais ici la haueur des 2 colones est fixe, hors moi l'une comme l'autre peuvent etre variable et donc y'a débordement les element float sortant du flux.

J'ai resolu plus ou moins le probleme en passant tous mes elements en float

la colone gauche mon content_include ainsi que mon footer.

en les contenant chacun dans un ensemble en relative cela semble fonctionner.

Ma question n'est plus pour resoudre mon probleme mais assouvir ma curiosité maintenant !



Peut on mettre 2 div relative cote a cote (hauteur variable) ?

Dans l'exemple du gabarit, il y à les instructions pour gérer le dépassement des flottants. Les contenus des 2 colonnes peuvent varier sans passer sur/sous le footer.

D'autres solutions existent suivant certaines contraintes mais le système des colonnes factices à suffisamment été éprouvé pour répondre le plus souvent à ce problème.

Voilà un post sur lequel j'étais tombé un jour :

Victor BRITO a écrit :
Si tu veux que tes deux colonnes aient la même hauteur, quelle que soit la longueur de leur contenu, tu as plusieurs solutions :
- utiliser la technique des colonnes factices (une image d'arrière-plan au niveau du conteneur englobant tes deux colonnes et ton contenu) ;
- mettre tes 2 colonnes et ton contenu en display: table-cell (inconvénient : les versions d'IE antérieures à la 8 ne comprennent pas table-cell) ;
- mettre tes 2 colonnes et ton contenu en positionnement flottant, leur ajouter un padding-bottom de valeur élevée (2000px, par exemple) et une marge inférieure négative de même valeur absolue (margin-bottom: -2000px, si l'on a défini padding-bottom à 2000px).

Merci mob pour ce complément d'information !

je vais marquer le post résolu quand meme !

Bonne journée