Как расположить div справа от предыдущего

[Casufi]

Есть код

 <div class=all_page>
 <div class=left_content_border>
 <div class=left_content>
 <img src="/site_resources/images/sidebanner.jpg"/>
 <div class=second_menu>
 Это первый блок 
 </div>
 </div>
 </div>
 <div class=right_content_border>
 <div class=right_content>
 Это второй блок

 Он должен находиться справа от первого

 </div>
 </div>
 </div>
 </div>

Вот стили

.left_content_border{
 margin-left: 5px;
 width: 248px;
 background-color: #ebebeb;
 float: left;
}
.left_content {
 margin-right: 4px;
 background-color: #ffffff;
}
.right_content_border {
 background-color: #ebebeb;
 margin-right: 100px;
}
.right_content {
 margin-right: 4px;
 background-color: #ff00ff; 
}

Что получается

Div right_content_border и right_content вместо того, чтобы лечь справа от дива left_content_border, начинаются от границы дива верхнего уровня.

Вот ссылка на образец

http://mail.avtodin.ru/site_resources/htmls/main_page.html

Вот ссылка но полный ЦСС

http://mail.avtodin.ru/site_resources/css/main_page.css

[Storm]

Вот ссылка на образец

http://127.0.0.1:8000/site_resources/ht ? _page.html

Вот ссылка но полный ЦСС

http://127.0.0.1:8000/site_resources/css/main_page.css

Отличные ссылки

Решение: в стиль .right_content_border нужно добавить float:left;

[Storm]

Конечно перестанут.

Для решения нужно после закрытия div.right_content_border написать

<div style="clear:both;"></div>

Решил проблему установкой левой границы правого блока

В данном случае это тоже вариант, но clear:both - правильнее и универсальнее.

[ZoNT]

float: left;

[Casufi]

Уже поправил.

Решил проблему установкой левой границы правого блока

.right_content_border {
 margin-left: 248px;
 background-color: #ebebeb;
 margin-right: 100px;
}

Есть еще одна проблема.

Содержимое блоков right_content и second_menu не тянет границу родительских блоков вниз

[Casufi]

Решение: в стиль .right_content_border нужно добавить float:left;

Тоже работает, и весьма красиво, только в этом случае оба блока перестают тянут границу верхних дивов вниз

[Casufi]

В данном случае это тоже вариант, но clear:both - правильнее и универсальнее.

Спасибо

clear:both нужно использовать в любом случае, вот только, если вешать float:left на второй блок, то у него перестает работать параметр margin-right: 100px;

[Storm]

А padding-right у него работает?

[Casufi]

А padding-right у него работает?

padding мне не подходит, padding отодвинет содержимое внутри блока, а merging отодвинет край блока.

margin-left меня пока устроил.

Попутный вопрос, как сделать так, чтобы свойство padding не затрагивало картинки внутри блока ?

[Storm]

как сделать так, чтобы свойство padding не затрагивало картинки внутри блока ?

Чтобы padding не влиял на картинку можно сделать только с помошью position:absolute для картинки, но тогда не только padding не будет влиять на картинку, а вообще ничего не будет влиять, кроме е? стилей.

Можно выставить картинкам свойства с отрицательными значениями margin, поставить картинкам position:relative и двигать их свойствами top и left.

Но самый правильный способ - это не выставлять у блока отступ, который может пагубно повлиять на правильно позиционирование картинки.

[belilo2001]

А как сделать, чтобы несколько DIV (миникартинок с надписями) располагались в одной строке пока там есть место и попадали на следующую строку, когда превышается ширина окна?

[belilo2001]

float: left;

ZoNT! Что вы хотели посоветовать? Объясните непонятливым, пожалуйста.

[ZoNT]

ставишь им всем float: left; и они позиционируются налево, а справа их обтекает следующий див с флоат=лефт