Два блока рядом друг с другом CSS

Материал из Викижурнал
Перейти к навигации Перейти к поиску
Введение в CSS
Два блока рядом друг с другом CSS
Тематические порталы

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

Вопросы по теме статьи или любые другие можно оставить на странице обсуждения.

Два блока DIV рядом друг с другом по горизонтали

Чтобы блоки расположить рядом друг с другом в одну линию необходимо прописать в CSS двум элементам следующим образом:

#block1 {
float: left;
display: block;
width: 300px;
border: 1px solid blue;
margin: 2px;
}

#block2 {
float: left;
display: block;
width: 300px;
border: 1px solid blue;
margin: 2px;
}

Здесь мы задали параметры отступов margin, чтобы блоки не "прилипали" друг к другу, этот параметр также можно изменить.

В формате HTML код будет выглядеть так:

<div id="block1">Текст</div>
<div id="block2">Текст</div>

На выходе получим:

Текст
Текст



  • float - можно придать значения "left" и "right", фактический означает к какой стороне прикрепить блок, можно например первый блок разместить слева, второй справа и они хорошо впишутся. Пример смотрите в конце статьи в созданном шаблоне.
  • display: block - выводит div блоком.

Примечание

Если же возникли трудности с вёрсткой на CSS или есть вопросы по данной статье, то задавайте их в специально созданной теме про CSS на нашем форуме.

Статьи по теме CSS