Почему футер уезжает?

Question

[Глеб Жуков]

При уменьшении ширины экрана меньше 550px футер начинает уезжать на верх.
Подскажите как исправить. Посмотреть сайт можно здесь.

Код html

<footer>
            <div class="copyrights">
            ©2016 Zhukov Gleb(gotlib)<br>
            When you copy any materials on third party websites, the link to http://www.gotlib.info required!
            
            </div>
            <div class="contacts">
                <i class="fa fa-phone-square" aria-hidden="true"></i> 8-912-641-3462<br>
                <i class="fa fa-envelope-square" aria-hidden="true"></i> [e-mail]
            </div>
        </footer>

Код css

.copyrights{
    float:left;
    width: 350px;
}

.contacts{
    width: 200px;
    float:right;
    margin:10px;
    padding:0;
}

footer{
    background:#000;
    color: #7f7f7f;
    width: 100%;
    height: 60px;
}

Answer 1

[Alexey]

Футер состоит из двух частей фиксированной ширины 350 + 200 пикселей. В итоге 550. При меньшем разрешении правому некуда деваться.
1) Плохое решение:
.copyrights = 60%
.contacts = 30% (margins, etc.)

2) Решение по-лучше:

@media screen and (max-width: 550px) {
    .copyrights {
        width: 100%;
    }

    .contacts {
        width: 100%;
    }
}

Answer 2

[iBird Rose]

это нормальное проявление, учитывая что страница не адаптивная и она масштабируется

Comments

[Глеб Жуков]

Я не могу понять этого явления, почему появляется отступ ? И почему страница не адаптивная ?

[pashted]

Глеб Жуков: не адаптивная потому, что на странице нет мета-тега viewport

[iBird Rose]

Глеб Жуков: никакого отступа не появляется. просто окно браузера по высоте становится больше самого твоего сайта. вот картинка. мб поймешь в че суть data3.floomby.com/files/share/13_11_2016/19/aI0jKi...

[Глеб Жуков]

iBird Rose: благодарю за разъяснения, сейчас мне стало понятно

Answer 3

[Ankhena]

В тот момент, когда уезжает футер, форма обратной связи на странице уехала уже давно, а текст над ней превратился в нечитаемый. Зато фото осталось во всю родную величину.

Так что надо либо ограничить минимальную ширину, либо переверстать сайт в адаптив.
Второе предпочтительнее, если Вы хотите, чтобы написанное у Вас в скилах выглядело правдой.

Answer 4

[Anton Bobylev]

Потому что на него давит блок .copyrights.

350+200 = 550

Comments

[Глеб Жуков]

с фиксированной шириной они всегда будут уезжать рано или поздно ? мне остаётся только сделать суммарную ширину 320px для маленьких экранов ?

[Anton Bobylev]

Глеб Жуков: вы используете свойство float, но не понимаете что оно делает. Ваши блоки всегда будут обтекать друг-друга при такой верстке и фиксированных значениях.

Answer 5

[Рюрик Ростиславич]

Мужик это ад
Хотя бы фреймворк бы за основу взял если не все мелочи знаешь