Как верстать блоки, выступающие из общей сетки до границ экрана?

Question

[Дмитрий]

Всем доброго дня!
Есть вот такой макет, нарисованный по стандартной, в общем-то, сетке, но столкнулся с проблемой вёрстки блоков, выступающих за её пределы: серый блок, выступающий влево до границы экрана и синий, выступающий вправо до границы экрана. Ковырял и так и эдак, все генерируемые мной решения кривы как турецкая сабля, реквестирую помощь у сообщества: как правильно верстать такие штуки?

Answer 1

[bingumd]

Можно так http://codepen.io

Comments

[noteblock]

сделал бы так же

[Дмитрий]

Вот такого способа не знал, огромное спасибо! Кстати, интересно: как поисковики расценивают скрытие широких блоков через оверфлоу?

Answer 2

[Ivan Bogachev]

Блоки, выступающие за пределы контейнера можно делать примерно так. Т.е. вы методом нехитрых размышлений понимаете какая ширина у них должна быть и ставите в нужное место.

Comments

[Павел]

ну и body горизонтальную прокрутку убрать overflow-x: hidden;

[Дмитрий]

Вот такое решение я и применил сразу, но в таком контейнере неудобно позиционировать текст, который должен быть как бы внутри сетки. Поэтому и решил спросить у джедаев - может ещё какой метод есть, который не пришёл в голову

[Дмитрий]

mrusklon: тогда посыплется мобильное меню, которое в uikit выезжает слева :)

[Павел]

JarvisVRTX: ну это для десктопов , на моб просто выключить

[Ivan Bogachev]

JarvisVRTX: По поводу позиционирования - можно прикрутить еще один контейнер и позиционировать в нем текст как угодно: codepen.io/sfi0zy/pen/VjoxwL?editors=0100

Answer 3

[Иван Сергеев]

на задний фон поставь два абсолютных блока шириной по 50% (ну и свойства им добавить left:0, right:0) ,
z-index-ом спрячь под основным контентом.

Как подружить z-index со статичными и абсолютными блоками - вот хорошая статья

Answer 4

[Дмитрий]

Не совсем понял задумку: если я поставлю блоки под основной контент, по бокам-то они видны будут везде, или я безбожно туплю сегодня?

Comments

[Voll .]

а писать под ответом в комментариях, пробовали?

[Иван Сергеев]

они же абсолютные - задайте им размеры какие надо и спозиционируйте как нужно.

[Дмитрий]

Voll .: не туда нажал второпях - мне в угол на горох встать теперь за это? :)
Иван Сергеев: так-то можно, конечно, но будут траблы с адаптивностью

[Иван Сергеев]

JarvisVRTX: да, может придется пару дополнительных медиазапросов написать.