Главная » Создание сайта, раскрутка сайта

Как разместить два блока div рядом?

как разместить рядом два блока div

Как разместить рядом друг с другом два блока <div>?

Недавно появилась у меня необходимость разместить два блока <div> рядом друг с другом. Связано это было с тем, что я заменил все изображения, используемые в дизайне сайта одним CSS спрайтом. А это значит что все изображения необходимо было добавлять через CSS, для чего и использовался блок <div>. Да вот проблема: второй блок упорно не хотел находится рядом с первым и слезал ниже необходимого уровня. После некоторого шаманства эти два блока начали наезжать друг на друга и второй почти что полностью перекрывал первый. Под блоками я имею ввиду соответствующие им изображения. Чтобы найти компромисс я полез изучить недра Интернета и нашел решение, с которым сейчас Вас познакомлю.

Размещаем два либо более блока <div> рядом друг с другом

Решение, как оказалось, весьма и весьма простое. Объясню я его на примере: в дизайне сайта должны находится два картинки рядом друг с другом. В HTML коде страницы происходит поочередный вызов двух блоков <div>:

<div id="carousel-right"></div>
<div id="carousel-left"></div>

Как видите тут ничего сложного нет. Вы просто добавляете два блока <div> и указываете соответствующие стили, которые отвечает за их отображение. Вмешательство необходимо в эти самые стили. Вам необходимо в эти стили добавить одну из следующих строк:

  • float:right;
  • float:left;
  • float:center;

Если кто не в курсе, то каждая из этих команд указывает где должен быть расположен данный блок: справа, слева или по центру соответственно. Допустим блоки из нашего примера должны быть расположены слева друг за другом, в таком случае Вам в обе стили необходимо добавить строку

float:left;

В итоге у Вас должен появится стиль приблизительно такого рода:

#carousel-right{
float:right;
...
}

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

Добавить комментарий

Ваш комментарий появится после модерации.