Позиционирование div на float?

Question

[Minat0_]

У меня всегда были проблемы с позиционировкой элементов в коде. Есть main-header, а у него есть два "подчинённых":

1. left-header;
   
2. right-header;
   

Проблема в том, что два "подчинённых" ни в какую не хотят объединиться. Помогите решить ламеру его проблему, пожалуйста.

Вот мой прекрасный г*вно-код:

Кликабельно

header {
    background: gray no-repeat;
    background-size: cover;
    width: auto;
    height: 450px;
}
header .main-header {
    background-color: black;
    opacity: 0.7;
}
header .main-header a{
    color: white;
    position: relative;
    padding: 20px 15px;
    float: left;
    font-family: 'Thasadith', sans-serif;
}
header div.left-header {
    width: 900px;
    height: 60px;
    font-size: 18px;
}
header div.left-header img{
    width: 60px;
    padding: 0 30px;
    float: left;
}

header .main-header a:hover{
    border-bottom: 1px solid white;
    transition: .3s;
    padding: 18px 15px;
    }
header div.right-header {
    width: 300px;
    height: 60px;
    font-size: 18px;
    float: right;
}

Онлайн версия
P.S. Знаю, как тяжело копаться в чужом г*вне, поэтому и сделал онлайн версию для удобства. :)

Answer 1

[Rustam Bainazarov]

Никаких float'ов и лишних обёрток...

Comments

[Minat0_]

У меня приходила мысль использовать display: flex, но я с ним не очень знаком. Благодарю.

[Rustam Bainazarov]

Minato, обновил код, посмотрите ещё раз. Если не нужна полная поддержка IE9/10, то только flexbox.

[Сергей Горячев]

Minato, yoksel.github.io/flex-cheatsheet/#justify-content потыкай пальцем и разберешься.

[Rustam Bainazarov]

Дополняя ответ Сергей Горячев, вот ещё на русском какая-то хренотень из этой же серии:
https://html5.by/blog/flexbox/

[Minat0_]

SmthTo, Сергей Горячев – большое спасибо вас за помощь.

[Rustam Bainazarov]

Minato, не за что! Да, кстати, такие рамки и грани (по типу белого подчеркивания) лучше делать не на border, а на box-shadow либо с помощью псевдо-элементов на абсолютном позиционировании. Border меняет габариты блока, что нам не нужно в данном случае (т. е. в данном случае снизу занимает пиксель, тем самым смещая на пиксель текст сверху).

Обновил код, тоже посмотрите на этот момент.

[Minat0_]

SmthTo, Сергей Горячев возник несколько необычный вопрос: как увеличить картинку(logo), используя, например, transofrm: scale() без потерь в качестве, или есть какой-то другой метод?

[Сергей Горячев]

Minato, через скале никак. а вообще, я верстку даже не открывал, хз.

[Minat0_]

SmthTo, очень интересно, спасибо.

[Rustam Bainazarov]

Minato, другого нет, это лучший. По идее, не видел артефактов от его использования. Если будете использовать тот же scale3d(), то Chrome будет растрировать элемент как бы в неполном разрешении, чего нет у обычного scale().

[Сергей Горячев]

SmthTo, не видел артефактов от скале? ты прикалываешься? да там любая картинка плывет жутко

[Сергей Горячев]

SmthTo, ну, естественно, при условии, что увеличение идет больше ее реального размера

[Minat0_]

SmthTo, Сергей Горячев, хотел спросить у вас: где лучше всего обучаться вёрстке? Не сказать, что тот же htmlacademy фигня, возможно, нужно просто больше верстать? ( ͡° ͜ʖ ͡°)

[Rustam Bainazarov]

Сергей Горячев, ну, тогда -- понятное дело. Тогда тут сделать ничего нельзя, если не хватает разрешения.

[Minat0_]

SmthTo, Сергей Горячев, я слышал, что картинка не теряет качество, если использовать svg формат. Миф или реальность?

[Сергей Горячев]

Minato, практика, практика и еще раз практика

[Minat0_]

Сергей Горячев, приму в расчёт.

[Сергей Горячев]

Minato, не миф. svg - это вектор.

[Rustam Bainazarov]

Сергей Горячев, Minato,
jsfiddle.net/gatmsbor

Ну а если при scale() конечный размер превышает реальное разрешение, то это уже не проблема scale() как такового, а самой картинки :))

[Minat0_]

Сергей Горячев, вполне логично.

[Minat0_]

SmthTo, чёртова магия! (╯°益°)╯彡┻━┻