Почему пляшут дивы?

Question

[unlik]

Имеется верстка.

jsfiddle.net/oduysw6c/1

Два внутрилежащих дива имеют float:left, два float:right.
Но проблема в том, что все 4 из них находятся на разном горизонтальном уровне. В чем проблема?

Comments

[Сергей delphinpro]

где верстка-то? сюда залейте jsfiddle.net

[unlik]

Сергей: jsfiddle.net/oduysw6c/1

[Сергей delphinpro]

unlik: ну вот, как-то так jsfiddle.net/DelphinPRO/oduysw6c/4
(или так jsfiddle.net/DelphinPRO/oduysw6c/2 )

[Сергей delphinpro]

unlik: или даже так jsfiddle.net/DelphinPRO/oduysw6c/5 (тут подшаманить нужно немного с шириной блоков)

[unlik]

Сергей: Почему то в последнем варианте кнопка перезвонить становится большой

[Сергей delphinpro]

unlik: Потому что это ячейка таблицы =)

[unlik]

jsfiddle.net/DelphinPRO/oduysw6c/4
А в этом варианте меню вниз уходит и становится не резиновым.

[Сергей delphinpro]

unlik: я вам только показал в чем суть "скакания" блоков. А допиливать под свои нужды извольте сами =)

Answer 1

[Евгений Лебедев]

Блок со свойством float: right; должны идти до тех, которые имеют float: left; по DOM дереву.
И не забудьте еще раз проверить наличие float у нужных блоков.

Comments

[Сергей delphinpro]

Евгений Лебедев >Блок со свойством float: right; должны идти до тех, которые имеют float: left;
которые имеют float: none, вы хотели сказать..

[unlik]

Все ок. Но маркированный список уезжает вниз.

[Евгений Лебедев]

Сергей: нет, я правильно высказался.
unlik: Список уезжает вниз, потому что ему места по ширине не хватает.

[Сергей delphinpro]

Евгений Лебедев: тогда поясните, почему float: left должны идти после float: right
По-моему, нет разницы jsfiddle.net/DelphinPRO/jzthf4bm

а вот с неплавающими блоками есть разница
jsfiddle.net/DelphinPRO/jzthf4bm/1
jsfiddle.net/DelphinPRO/jzthf4bm/2

или я чего-то не понимаю?

[Евгений Лебедев]

Сергей: Замечание справедливое. Был не прав.

Answer 2

[Андрей Федоров]

Зачем вам в принципе float'ы? Сделайте везде display: inline-block; и vertical-align: middle;
Или я не понял изначальную задумку. Картинку бы увидеть.

Comments

[unlik]

В общем слева идет логотип, справа номер телефона и кнопка. Посередине резиновое меню.
Сделал уже через inline-block но не могу к правому краю элементы прибить

[Андрей Федоров]

Сделайте лого и телефон+кнопка фиксированной ширины. Для рассчета ширины резинового меню используйте calc.

codepen.io/aliencash/pen/VLaVee

Изучайте. Особенно стиль класса menu

[unlik]

Такой подход хороший. Но максимальная ширина логотипа, меню и контактов вместе должна быть 1200 px. Плюс еще и минимальную нужно задать 600px.

[Андрей Федоров]

Ой, да ладно. Неужели сам не справитесь?
.top {
max-width: 1200px;
min-width: 600px;
}

[unlik]

С эти разобрался уже. Стоял просто fixed.
Остался вопрос один. Если в логотип вставляю картинку, то она наполовину обрезается. пробовал и z-index и высоту задавать.

[Андрей Федоров]

Дак задайте размеры области логотипа под размеры картинки. В чем проблема?

[unlik]

Тогда логотип вверх ускакивает.

[Андрей Федоров]

.logo div:first-child {
display: inline-block;
vertical-align: middle;
height: 100%;
}
.logo {
background: #fff 50% 50% url('toplogos.ru/images/logo-batman.gif') no-repeat;
background-size: contain;
color: #fff;
text-align: center;
width: 300px;
height: 100%;
}

Мне все за вас верстать? ))

[unlik]

Андрей Федоров: Спасибо)