Problème de placement

Par Nounoune, il y a 3 ans

Les bases HTML/CSS

Bonjour,

voici mon problème :

J'aimerai qu'un élément qui est placé dans plusieurs container (dans l'exemple le container-3) fasse 100vw et qu'il s'étende de gauche à droite de l'écran sans sortir du flux.

J'imagine que la solution se trouve avecune position relative les margin-left, left, translateX(). Mais après de multiples tentatives, je n'arrive pas au comportement voulu !

Donc si quelqu'un a une idée, je suis preneur. :)

<div class="container-1"> <div class="container-2"> <div class="sub-container-1"></div> <div class="sub-container-2"> <div class="container-3"></div> </div> </div> </div> .container-1 { display: block; margin: auto; padding: 4vw; background: red; height: 2000px; } .container-2 { display: flex; margin: auto; max-width: 1240px; width: 92%; background: blue; padding-left: 20px; padding-right: 20px; height: 1000px; } @media (min-width: 768px) { .container-2 { padding-left: 0; padding-right: 0; } .container-2 .sub-container-1 { width: 30%; margin-right: 5%; background: green; height: 500px; } .container-2 .sub-container-2 { width: 65%; display: block; background: green; height: 800px; } .container-3 { position: relative; width: 100vw; background: yellow; /* margin-left: calc (100% + ); left: ; transform: translateX();*/ height: 500px; }

Merci par avance pour vos retour.

Bonne journée

2 réponses

Grafikart, il y a 3 ans

Tu peux nous faire un pti schéma pour mieux comprendre l'objectif ?

Nounoune, il y a 3 ans

J'ai trouvé la solution, je cherchais compliqué avec du calcul, mais il y avait juste à mettre un transform: translateX(-50%) et il ne restait plus qu'à trouver le bon pourcentage à mettre à left pour que ça s'étende de part et autre de l'écran (dans mon cas 23.1%). SI jamais j'ai fait un pen https://codepen.io/tristan_Og/pen/mdQJEqe