Top.Mail.Ru
Ответы

Блок div смещается под другой div при уменьшении окна браузера!

Есть родительский div шириной 960px. В нем размещены 2 div как на рисунку. Div отображаются как inline-block. При уменьшении окна браузера 2 div съезжает под 1 div. Нужно чтобы 1 div сжимался при уменьшении окна, так как его ширина в %. Как можно решить такую проблему?

Дополнен

#parent-block{
width: 100%;
max-width: 958px;
margin: 10px auto 0 auto;
background: #F5F5F5;
border: 1px #FFF solid;
box-sizing: border-box;
position: relative;
flex: 1;
}
#left-block{
width: 97%;
height: auto;
max-width: 700px;
display: inline-block;
margin-left: 10px;
}
#right-block{
width: 100%;
max-width: 220px;
margin-left: 15px;
display: inline-block;
vertical-align: top;
}

Дополнен

Kostua Belokopytov, спасибо за ответ, но нужно чтобы правый блок был фиксированным.

Дополнен

МАСТЕР, все так как надо, но блок сжимается только если в нем нет контента/текста, в другом случае так же смещается вниз.

По дате
По рейтингу
Аватар пользователя
Мудрец
10лет

Если родительскому диву указана жесткая ширина, то должна появиться прокрутка при уменьшении окна браузера. код лучше размещать на jsfiddle.net

PS. Поправил немного Костю. https://jsfiddle.net/hvr7m5g3/2/

Аватар пользователя
Мастер
10лет

Покажи какие стили-то у тебя написаны, включая родительский блок. Экстрасенсорика в другом разделе.

Аватар пользователя
Знаток
10лет

https://jsfiddle.net/hvr7m5g3/
Хотя правый блок должен быть жестким...