[NoToTenTego]

#frontend #css #html
Mam container który ma standardowo 1024px szerokości max i wyśrodkowany jest poprzez margin 0 auto;
Problem polega na tym, że każda sekcja taka jest ale jedna (banner) ma zaczynać się równo z lewą stroną i trzymać się jej jak te kontenery 1024px ALE z prawej ma osiągnąć dodatkowo +~200px na content. Czyli kontener powinien mieć 1224px gdzie content prawy zajmuje dodatkowo 200px.

Problem mój to taki, że nie wiem jak to zrobić? Jak zrobię po prostu kontener na 1224px to nie ustawię równo z lewej z tymi 1024px bo nie są responsywne. Jak zrobię sekcję na 1024px to jak wystylizować prawy content aby rozciągał się i skurczał ze stroną ale skończył dalej niż 1024px ?? Czyli żeby miał te + 200px z prawej a lewa strona stoi równa z innymi sekcjami??? KTOŚ COŚ?

[NoToTenTego]

jedyna opcja to dać na prawą sekcje np. 150% i #!$%@? to poza container ale w ogóle nie jest to responsywne przez to. W sensie musiałbym dodać teo 150% na odpowiednim breakpoincie i jest mignięcie że content nagle z 1024px zrobił się na 1224px ale za to trzyma się lewej, eh ....

[enslavedeagle]

@NoToTenTego:

Jedna opcja to position: absolute i tylko left i right dać na zero: https://codepen.io/patrykb/pen/oNoWXQw

Jeśli tak się nie da, bo np. rodzic ma position: relative, to zostają ujemne marginesy i prosta arytmetyka: https://codepen.io/patrykb/pen/NWwjqMe (9px to rozmiar scrollbara)

[NoToTenTego]

https://codepen.io/patrykb/pen/NWwjqMe

@enslavedeagle: żeby to działało tak jak chce to niebieski obiekt musiałby zatrzymać się na równi z tym górnym i dolnym a prawy się przesuwać z przeglądarką i zatrzymać np. po wyjechaniu o 200px z prawej strony. A tak się nie dzieje

[enslavedeagle]

@NoToTenTego: dopiero doczytałem dokładniej o co chodzi, ale ww. sposobami osiągniesz zamierzony efekt, kwestia pokombinowania z wartościami

[kohlrabi]

@NoToTenTego: możesz dać min-width: 1024px; max-width: 1224px; i w momencie w którym będzie miejsce na dodatkowy content dać breakpoint z margin-left: calc((100% - 1024px)/2);
możesz też zrobić absolutne dziecko (albo użyć ::after) temu banerowi, dać max-width: 200px; height: 100% i margin-left:100%