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

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

Тематические порталы Портал CSS • Портал Веб-разработчиков

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

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

Создание блоков в HTML

Для начала нам нужно создать в HTML два блока <div> на нашей странице:

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

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

Два блока, расположенные в один ряд при помощи CSS

Чтобы блоки расположить рядом друг с другом в одну линию необходимо прописать в 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;
}

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

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

Дополнительные настройки

Остальные параметры носят декоративный характер:

• width - задаём размер блокам
• border - настраиваем границу блоков
• margin - внешние отступы, чтобы блоки не прилипали друг к другу

Примечание

Исходный файл можно скачать по ссылке.

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