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

Как разместить рядом друг с другом два блока <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>. Аналогичные действия необходимо произвести чтобы привязать блоки к правому краю или по центру. Вот и всё.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here