Как сделать два блока, чтобы они находились один слева другой справа (две колонны). У меня правый блок отодвигается вправо, но находится ниже левого (как в нормальном потоке), мне же нужно, чтобы они были на одном уровне. Использую плавающие блоки (float). Пробовала свойство clear, но ничего не выходит. Надеюсь, правильно изложила вопрос. Спасибо.
2 ответа
<style type="text/css">
.container { overflow: hidden; }
.container .left_column { width: 50%; float: left; }
.container .right_column { width: 50%; float: left; }
</style>
Контент до
<div class="container">
<div class="left_column">
Левая колонка
</div>
<div class="right_column">
Правая колонка
</div>
</div>
Контент после
Пример. Колонкам заданы разные классы, так как скорее всего у них будут разные отступы (например, если нужно будет добавить отступ между колонками).
Если справа от правого блока в пределах одного родителя ничего не будет, то я бы сделала левый блок float:left;
а правый блок float:right;
, они бы упёрлись в стенки родителя и были бы по разные стороны. :-)
-
а ещё нужно не забывать новичкам напоминать про высоту элементов, содержащих внутри себя только плавающие элементы. А то будет потом масса удивления в ключе «а чегой-то мой подвал к шапке прибился между колонок?» – Syabrowka 2 апр '12 в 9:51
-
@Syabrowka, методом наглядного тыка смогут догадаться в чём дело и применят свойство clear. :-) – Angelina_Jo 2 апр '12 в 10:12
-