Почему при уменьшении ширина окна браузера блоки смещаются вниз, а не ужимаются?

Question

[Gustov]

Блоку навигации (nav) задала ширину (width: 64%;), а элементам навигации сделал (padding-left: 11%;), но почему-то уже после небольшого уменьшения окна браузера последний элемент навигации (li) начинает прыгать, разве не должны они ужиматься дальше? В чем проблема и как исправить?

https://jsfiddle.net/L5zen17c/

Answer 1

[V Sh.]

Да у вас просто текст "Информация" и "Возможности" расширяют свои блоки и они не влазят в ваши отступы на одной строке.

Comments

[V Sh.]

Ну, это всех блоков касается. Просто блоки по тем или иным причинам не помещаются на одной строке и поэтому съезжают. Нарисуйте у элементов бордеры и посмотрите на это наглядно...

[Gustov]

Да, спасибо, уже тоже разобрался. Я так понимаю что в данном случае мне надо так же уменьшать текст в элементах навигации? А то элементы у меня занимают фиксированную ширину, а отступы хочу что бы были плавающими, я так понял что первоначально неправильно поставил задачу.

[V Sh.]

Gustov: Судя по тому, что все размеры вы задаете в процентах, то вы верстаете какой-то резиновый макет. Я сам только начинающий, поэтому много подсказать не могу, но вы можете проставить min-width у контейнера, например, и он дальше этого значения ужиматься не будет. А там просто посмотреть как он смотрится в разных состояниях и от этого уже отталкиваться.