div с margin-left вылезает за экран но прокрутка не появляется

[zheka2]

Здравствуйте

 

Подскажите, пожалуйста, как правильно решить

 

Сверстал страницу как на скриншоте, понадобалось добавить небольшой информационный блок слева от основного контента, выделен зелёным. Для левого зелёного блока выставил отрицательный margin-left и float. В итоге при уменьшении размера окна маленький блок скрывается, а прокрутка не появляется.

 

Можно сделать через side-bar. Но во-первых придётся выравнивать скриптом положение блока по вертикали, чтобы он был напротив зелёного соседа, во вторых на других страницах нет сайдбаров, хотелось обойтись без него чтобы ничего не поломать.

 

Это решаемо?

 

[Switch74]

предположим у вас основной блок контента имеет размер 800px, вам слева нужно приделать еще один блок, скажем размером 100px, но:

1. данный блок должен всегда показываться

2. и контент должен быть выровнен по центру

 

тогда обертываем наш контент в обертку размером 1000px и получится, что под ваш блок приделанный слева будет зарезервировано 100px, а справа зарезервировано 100px для того, чтобы контент центрировался по центру относительно экрана

 

ну или по сути вам нужен padding-right

[Switch74]

задайте минимальную ширину сайта с учетом этого блока

или делайте данный блок в потоке документа

[zheka2]

Switch74, Спасибо

 

Задал минимальную ширину для body, но пришлось задать больше чем нужно. Например ширина основного блока 500, левого зелёного 250. А ширину пришлось указать 1000, т.к. основной блок выровнен по центру

 

или делайте данный блок в потоке документа

Можно немного подробнее?

 

Чтобы более предметно, вот пациент fc.enaxy.ru

Edited May 21, 2015 by zheka2

[Switch74]

просто добавить колонку слева, которая будет частью main-wrapper например и зарезервировать под ваш блок место в нем

еще можно с помощью @media сделать правила по которым будет резервироваться место под данный блок при размере экрана меньшем чем нужно

[zheka2]

Понял, я всё думал если делать колонку слева то туда и выводить, а она нужна просто для резервирования, большое спасибо!

[zheka2]

Один косяк при таком варианте остался, страница центрируется с учётом этого блока-заглушки, как можно оставить положение блока main-wrapper по центру?

Edited May 21, 2015 by zheka2

[zheka2]

Спасибо, попробовал оба варианта, получается при уменьшении размера окна прокрутка появляется немного раньше чем нужно, т.е. с учётом пустоты справа. В общем то с этим жить можно, если просто решить нельзя то оставлю так 

 

[Switch74]

можно с помощью @media убирать отступ справа при меньших размерах экрана, тогда поведение будет такое, какое вам нужно

а можно сделать для обертки размеры min-width и max-width тогда она будет тянуться по возможности

[zheka2]

Спасибо, буду пробовать =)