Как сверстать блок за пределами 1200px?

Question

[Римский]

Здравствуйте. Подскажите пожалуйста, как лучше всего сверстать данный блок скрин который в красной рамке. Спозиционировать? Вся ширина дизайна 1700px, центр 1200px, но есть много различных элементов за пределами 1200px, элементы статичны. Сетка bootstrap.

Answer 1

[dom1n1k]

В очередной раз недоумеваю, зачем совать бутстраповскую сетку везде, где ни попадя?
Какой от неё толк в данном конкретном случае? Я не уловил.

Answer 2

[Антон]

на ум приходит
1) расширить сетку, вставить по бокам 2 плейсхолдера
2) right: calc((100vw - 1200px) / 2 + 1200px);

Comments

[Сергей]

мсье знает толк в извращениях... left:0; и transform: translateX(-100%); чем вам не угодили? ))

[Антон]

void01: ну эт не совсем не извращение, vw работает быстро, в отличие от % например. Ну а ваш способ да, забыл, он будет попроще. Если, конечно, не потребуется fixed

[Сергей]

Антон: на счет fixed и оптимизации согласен, а так у меня нелюбовь к сложным calc, часто приходится допиливать чужие проекты и когда такое встречаешь в коде ненадолго подвисаешь пока мозг просчитывает поведение элемента. Ну и сам всегда стараюсь использовать запись попроще для потенциальных преемников ))

[Сергей]

Антон: и кстати 0% и 100% считаются "быстро", кстати vw - это те же проценты по факту

[Антон]

void01: на счет "быстро" точно не скажу, но был случай, когда в хроме была анимация рывком, а на переходе на 100vw анимация уже была плавное

[Сергей]

Антон: логично, ведь 100vw - это 100% вьюпорта верхнего и единственного элемента, а 100% DOM элемента - это 100% его родителя, а у родителя тоже посчитаем размер от родителя, потом от его родителя и так до верха DOM дерева. Вот если у родителя DOM элемента ширина фиксированная скажем 100px то тогда будет ничуть не медленнее 100vw

[Максим]

Сергей: зачем извращаться через transform? можно написать right: 100%

[Ankhena]

Антон Сергей
Зачем такой сложный calc, если раскрыв скобки получается 1 действие
clac(50vw + 600px)

[Антон]

Ankhena W: веб программист математикой пользуется очень редко) вот и глаз отучился быстро распознавать раскрытие скобок

Answer 3

[Сергей]

из описания нифига не понятно,
но если я всетаки уловил мысль, я бы разместил блок внутри блока 1200
дал ему ширину 250, спозиционировал абсолютно top:0 left:0 и накинул transform:translateX(-100%)

ну или собери себе бутстрап с гридом 34 колонки и развлекайся ))
getbootstrap.com/customize/#grid-system

UPD: я кажется понял о чем ты....
ты про границу media query для суффикса lg 1200px

собери себе кастомный бутстрап
getbootstrap.com/customize/#media-queries-breakpoints <= тут ты можешь задать свои 1700px как lg

Answer 4

[zooks]

position: relative;