Как разместить рядом друг с другом два блока <div>?
Недавно появилась у меня необходимость разместить два блока <div> рядом друг с другом. Связано это было с тем, что я заменил все изображения, используемые в дизайне сайта одним CSS спрайтом. А это значит что все изображения необходимо было добавлять через CSS, для чего и использовался блок <div>. Да вот проблема: второй блок упорно не хотел находится рядом с первым и слезал ниже необходимого уровня. После некоторого шаманства эти два блока начали наезжать друг на друга и второй почти что полностью перекрывал первый. Под блоками я имею ввиду соответствующие им изображения. Чтобы найти компромисс я полез изучить недра Интернета и нашел решение, с которым сейчас Вас познакомлю.
Размещаем два либо более блока <div> рядом друг с другом
Решение, как оказалось, весьма и весьма простое. Объясню я его на примере: в дизайне сайта должны находится два картинки рядом друг с другом. В HTML коде страницы происходит поочередный вызов двух блоков <div>:
[html]<div id="carousel-right"></div>
<div id="carousel-left"></div>[/html]
Как видите тут ничего сложного нет. Вы просто добавляете два блока <div> и указываете соответствующие стили, которые отвечает за их отображение. Вмешательство необходимо в эти самые стили. Вам необходимо в эти стили добавить одну из следующих строк:
-
[html]float:right;[/html]
-
[html]float:left;[/html]
-
[html]float:center;[/html]
Если кто не в курсе, то каждая из этих команд указывает где должен быть расположен данный блок: справа, слева или по центру соответственно. Допустим блоки из нашего примера должны быть расположены слева друг за другом, в таком случае Вам в обе стили необходимо добавить строку
[html]float:left;[/html]
В итоге у Вас должен появится стиль приблизительно такого рода:
[css]#carousel-right{
float:right;
…
}[/css]
Такую строку необходимо добавить в каждый стиль, который используется для вывода хотя бы одного из этих блоков <div>. Аналогичные действия необходимо произвести чтобы привязать блоки к правому краю или по центру. Вот и всё.