Как сверстать фиксированное левое меню?

Question

[netwbit]

1) Всем добрый день. Помогите новичку, пожалуйста, я не могу толком найти решение. Извините за такую пикчу, в дороге нарисовал. Проблема такова, что мне нужно сделать фиксированное левое меню, и одновременно сделать так, чтобы сайт размещался по центру экрана. Если задавать блоку меню position: fixed, то он выпадает из общего потока (блок залитый красным цветом), а мне нужно чтобы он был в общем блоке. Если сделать в общем блоке, он скроллится вместе со всем. Хочу верстать на bootstrap 4. Подскажите как вообще лучше реализовать подобную разметку.
2) Совсем понаглею, может есть здесь кто-то, кто согласился бы немножко менторить меня в верстке и JS. Мне много не надо, иногда отвечать на вот такие глупые вопросы, иногда просто указать, что переделать. Идеально если Киев, я могу отблагодарить какими-то другими услугами, типа поедь-забери или что-то типа того. Заранее спасибо, извините, если не по теме немного.

Answer 1

[Сергей Горячев]

Просто задать для MAIN margin-left равный ширине красного блока.
Можно физически на CSS, а можно динамически на JS или jQuery, не важно.
Просто набросок https://jsfiddle.net/webirus/9vg3pud0/1/

Comments

[netwbit]

Спасибо, что детально расписали. Только у меня все равно вопрос. Мне нужно чтобы и header был во wrappere. И я не пойму, и header и navigation находятся в родительских блоках, почему тогда navigation не выпадает из потока, а header - да.?

[Сергей Горячев]

netwbit: Мой косяк https://jsfiddle.net/webirus/9vg3pud0/1/
Чтобы не выпадало, не указывай left и right.

[netwbit]

Сергей Горячев: Спасибо, огромное!