[Résolu] Pb de largeur lors du positionnement d'une div par-dessus ..

Bonjour,

Comme le titre l'indique, je m'arrache les cheveux sur un positionnement de div depuis quelques jours. Concrètement, j'ai créé une div dont la largeur est de 100% par-dessus laquelle j'ai positionné une autre div, le tout englobé dans une div wrapper. Jusque là, pas de soucis, voici ci-dessous le code :

		<div class="wrapper">
			<div class="homepage-map-sidebar">
				Ma div à 100% de largeur
			</div>
			<div class="container">
				<div class="homepage-map-text-sidebar col span_3_of_12">
Ma div de contenus par-dessus
				</div>
			</div>
		</div>

Comme vous le constaterez, ma seconde div a deux particularités :
1 - elle est placée dans un div à la classe "container" qui me permet de centrer le contenu de tout mon site
2 - elle possède deux classes "col" et "span_3_of_12" qui me permet d'harmoniser la grille générale du site

Le problème est le suivant :
ma div qui passe par-dessus ne respect pas la largeur imposée par la classe "span_3_of_12". Etant positionnée en absolute pour passer au-dessus de l'autre div, sa largeur est adaptée à la fenêtre et non à la div "container"

Voici le code css actuel :

.wrapper{
	position:relative;
}

.homepage-map-text-sidebar{
	position: absolute;
	top:0;
	margin:3.5em 0;
}

.container{
	width:80%;
	max-width: 1400px;
	margin:0 auto;
}

.col {
    display: block;
    float: left;
}

.span_3_of_12 {
	width: 23.8%;
}

Je n'arrive plus à y voir clair, quelqu'un aurait-il une torche s'il vous plait?

Par avance merci pour votre aide.
Modifié par jharrow (05 Nov 2014 - 13:22)

Bonjour,

Il manque un position:relative; sur ton container. La position absolute va placer ton élément par rapport à son premier parent positionné. Ici container n'est pas positionné, il va donc remonter jusqu’à tomber sur wrapper

Bonjour, et merci pour cette réponse rapide !

J'ai updaté mon code sur tes conseils et effectivement le rajout de position:relative sur le container donne bien la largeur escomptée mais du coup, la div de contenus n'est plus positionnée par-dessus (en profondeur) la div possédant la classe "homepage-map-sidebar". Elle va se placer en dessous, comme si les divs étaient simplement placées les unes après les autres.

Serait-ce un problème lié à la méthode de positionnement de l'une par-dessus l'autre qui est bancale?

J'ai mis du temps à comprendre ce que ca devait donner, c'est pas très clair !

Elle s'affiche dessous car .homepage-map-sidebar et .container sont en relatif et le contenu est positionné par rapport au .container.

jharrow a écrit :
Serait-ce un problème lié à la méthode de positionnement de l'une par-dessus l'autre qui est bancale?

Effectivement c'est assez bizarre de laisser le fond dans le flux et de mettre tout le contenu du site en absolute. Et si tu tentais l'inverse ? Le .homepage-map-sidebar en absolute (top et left à 0 et width à 100%) prendra la largeur du .wrapper et le reste en relatif veindra tout naturellement par dessus.

du genre ça : http://jsfiddle.net/j0h7s7er/

re-Bonjour,

ça fonctionne parfaitement ! je ne suis pas tout à fait sûr de bien avoir compris le principe, je vais essayer de le décortiquer.

Merci infinimement pour votre aide, bien que le problème n'était pas très clair

Cool alors

Le positionnement absolute sort les éléments du flux. C'est un positionnement qui peut être pratique et très puissant parfois mais à éviter tant que faire se peut (surtout pour le contenu global). Il vaut mieux le réserver aux éléments de décors qui n'influent que très peu sur le contenu, la hauteur de la page etc... mais bon après on peut très vite partir dans de grand débats philosophiques sur comment faire quoi il y a pleins de façon de faire, à toi de comprendre le fonctionnement et de choisir celle qui te parait la plus adaptée en fonction de ton but !

Si tu veux reprendre les bases je te conseille d'aller faire un tour dans la partie "Apprendre" du site http://www.alsacreations.com/apprendre/ (et du coup pour ce problème -> la partie "Comprendre le positionnement en CSS") il n'y a que de très bon articles super pour bien (ré-)intégrer les bases.

Bonne continuation !
Modifié par _laurent (05 Nov 2014 - 13:44)

Oui c'est juste, je vais retourner faire un tour dans les tutos, ça fait toujours du bien de reprendre les bases de temps en temps.

Merci

@+1 _laurent, je renvoie juste (plus précisément) à cet article de Florent que je trouve très complet :
Guide de survie du positionnement CSS