Архивировано

Эта тема находится в архиве и закрыта для публикации сообщений.

  • 1
Casufi

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

Вопрос

Есть код

 <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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Рекомендованные сообщения

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

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;

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Решение: в стиль .right_content_border нужно добавить float:left;

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
В данном случае это тоже вариант, но clear:both - правильнее и универсальнее.

Спасибо

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
А padding-right у него работает?

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

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

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

Поделиться сообщением


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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах