В чем может быть проблема, съезжает вниз?

Question

[Frel]

В моей верстке класс .right_side снижает вниз когда задаю ширину с высотой или падинги, почему?
сайт
P.s. Кстати код читабельный?

Answer 1

[Милок Мурлыка]

Мне кажется не очень хорошей идеей таким образом совмещать float left и float right.
Что то подобное я бы реализовал так:

.right_side,
.left_side {
float: left;
width: 50%;
}

P.s. Кстати код читабельный?

У вас блок mid схлопывается, есть статья на эту тему webcareer.ru/clearfix-na-css.html

Comments

[Родион Мещеряков]

Тогда имя класса right_side будет сбивать с толку, потому что фактически этот блок стремится влево, а не вправо :)

Лучше тогда создать единственный класс .side

[Милок Мурлыка]

Родион Мещеряков: я сгруппировал их только для лаконичности и ширина может быть любая, например 40 и 60, 55 и 45 и т.д.

[Родион Мещеряков]

Милок Мурлыка: Я не о том. А о том, что блок называется right_side, т.е. "правая сторона", но при этом прижимается влево. Это как назвать класс .red_button и покрасить ее синий.

Короче, имена классов не должны описывать подобные визуальные детали.

[Милок Мурлыка]

Родион Мещеряков: напутал немного, в предыдущем ответе. Блок условно делиться на две части, и если в суме ширина получается 100% родителя, то неважно куда они стремятся. При float: left, первый блок всегда будет left_side а второй right_side, при float: right наоборот. В своем ответе я имел ввиду что не стоит смешивать float'ы разных направлений без необходимости, вот например если захочется добавить колонок, намного проще есле блоки будут стремиться в одну строну, стили у всех будут общие, останется только подрегулировать ширину

[Frel]

Милок Мурлыка: Я клерфикс добавлял еще давно, думал, в этом проблеме!

Answer 2

[Родион Мещеряков]

Потому что при задании большой ширины или паддингов, левый и правый блоки не влазят в отведенное пространство и правый блок просто вытесняется левым блоком вниз. Это можно увидеть даже ничего не меняя в верстке, а просто ужав окно браузера по ширине.

Следующий вопрос: чего вы в итоге хотите добиться? Если просто оставить дизайн примерно таким, как есть сейчас, то можно добавить min-width для body со значением, достаточным для того, чтобы оба блока вмещались.

Comments

[Frel]

А как сделать его потом резиновым?

[Родион Мещеряков]

Все зависит от дизайна, который предполагается реализовать.