Sign in to follow this  
Casufi

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

Recommended Posts

Есть код

 <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

Share this post


Link to post
Share on other sites

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

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

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

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

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

Share this post


Link to post
Share on other sites
Решение: в стиль .right_content_border нужно добавить float:left;

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

Share this post


Link to post
Share on other sites
В данном случае это тоже вариант, но clear:both - правильнее и универсальнее.

Спасибо

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

Share this post


Link to post
Share on other sites
А padding-right у него работает?

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

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

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

Share this post


Link to post
Share on other sites
как сделать так, чтобы свойство padding не затрагивало картинки внутри блока ?

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Member Statistics

    46,333
    Total Members
    3,128
    Most Online
    sohaibkhalid614
    Newest Member
    sohaibkhalid614
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.