Как выровнять блок при масштабировании?

Question

[fenucss]

Здравствуйте. Подскажите пожалуйста как при резиновой верстке позиционировать блок поиска. При масштабировании съезжает.
Код - https://jsfiddle.net/0kegutgk/

Comments

[Никита Белов]

Как именно он съезжает ?

[fenucss]

Никита Белов: логотип остается на месте и масштабируется вместе с шапкой, а поле поиска съезжает за пределы шапки вниз.

[Никита Белов]

fenucss: добавьте логотип и инпут в один фиксированный блок.

[fenucss]

Никита Белов: так если я добавлю в фиксированный блок, то при масштабировании шапки, они будут на одном месте, а шапка уменьшится и они также будут не в том положении.

[Никита Белов]

fenucss: Я тут вообще шапки не вижу, я вижу какой-то п***ц

[fenucss]

Никита Белов: prntscr.com/g2foa7 вот шапка

[Ankhena]

1. background-size: cover;
2. Если "лого" уменьшается, а поиск нет, то логично, что они ведут себя по разному. Зададите одинаковую логику поведения, будут одинаково.

Answer 1

[PiggyPig]

Как-то так:

https://jsfiddle.net/0kegutgk/4/

Задаете отступ сверху с единицей измерения vw. Это будет размер относительно ширины экрана девайса.

Также убрал у Вас лишний закрывающий тег div и исправил некоторые css-стили. Например, no-repeat можно уместить в одну строку с background'ом, а width: 100% никак не влияет, если родитель не имеет фиксированную ширину : )

Comments

[fenucss]

при уменьшении экрана съехало - prntscr.com/g2fq48

[PiggyPig]

fenucss: просто точно так же задаем высоту:

https://jsfiddle.net/0kegutgk/5/

[fenucss]

PiggyPig: да, разобрался) Благодарю)