Форум Сайтостроение Веб-строительство

Блочная верстка div интересный и не понятный момен...

12
[Удален]
1054

Добрый день!

Разъясните пожалуйста в чем хитрость?

Есть главный контейнер div в нем еще три, левый, середина, и правый. 

<div id="conteyner">

   <div id="left"></div>

   <div id="right"></div>

   <div id="content"></div>

   

</div>

И есть правила: 

#conteyner {

   margin: 0px auto;

   background-color:#00CC66;

   width: 800px;

   height: 600px;

}



#left{

   margin: 0px;

   margin-top: 50px;

   padding: 0px;

   background-color:#0066FF;

   width: 100px;

   height: 400px;

   float: left



}



#content{

   margin: 0px auto;

   margin-top: 30px;

   padding: 0px;

   background-color:#999999;

   width: 400px;

   height: 500px;

}



#right{

   margin: 0px;

   margin-top: 50px;

   padding: 0px;

   background-color:#FF0000;

   width: 100px;

   height: 400px;

   float:right;

}

Так вот левый слешается маргин-топ, правый тоже, а средний нет. Если ставишь ему маргин-топ - то он делает отступ от окна браузера, а не от главного контейнера.

Когда главному прописываешь padding хотя бы 1px, то средний начинает слушаться margin-top.

A
На сайте с 12.08.2010
Offline
35
Argentino
#1

сообщение удалено

брендовые логотипы от 30$ Портфолио (http://www.weblancer.net/users/Argentino/portfolio/) (основное портфолио по запросу через ЛС)
[Удален]
#2

А почему бы не задать position? Чтобы явно задать родительский блок.

U2
На сайте с 05.02.2011
Offline
69
Us2828
#3

Скиньте ссылку, быстрее помогу.

А так попробуйте #content тоже прописать float: left

[Удален]
#4
Us2828:
Скиньте ссылку, быстрее помогу.
А так попробуйте #content тоже прописать float: left

Ссылки нет, на локальной. Я просто осваиваю верстку не спеша...

Да если среднему блоку задать float: left; то он слушается, но становится прижат с левому блоку

Не понятно почему так происходит...

M2
На сайте с 11.01.2011
Offline
341
mark2011
#5

Вот я что-то не понял... что значит "не слушается"? margin-top - это расстояние от верхнего края браузера. Ну так у вас так и есть - крайние отстоят на 50px вниз, средний чуть меньше - на 30. Но разница есть. 


<html>

<head>

<title>test</title>

<style>

#conteyner {

   margin: 0px auto;

   /*background-color:#00CC66;*/

   width: 800px;

   height: 600px;

}



#left{

   margin: 0px;

   margin-top: 50px;

   padding: 0px;

   background-color:#0066FF;

   width: 100px;

   height: 400px;

   float: left



}



#content{

   margin: 0px auto;

   margin-top: 30px;

   padding: 0px;

   background-color:#999999;

   width: 400px;

   height: 500px;

}



#right{

   margin: 0px;

   margin-top: 50px;

   padding: 0px;

   background-color:#FF0000;

   width: 100px;

   height: 400px;

   float:right;

}

</style>

<div id="conteyner">

   <div id="left"></div>

   <div id="right"></div>

   <div id="content"></div>

   

</div>
------------------- Крутые VPS и дедики. Качество по разумной цене ( http://cp.inferno.name/view.php?product=1212&gid=1 ) VPS25OFF - скидка 25% на первый платеж по ссылке выше
Новый постоянный интерфейс Яндекс.Картинок Google: что влияет на Google Ads запустил четыре
C
На сайте с 04.02.2005
Offline
291
Chukcha
#6
margin-top - это расстояние от верхнего края браузера.

Ой, не пугайте так...

Почитайте вот здесь

http://www.howtocreate.co.uk/tutorials/css/margincollapsing

P
На сайте с 25.05.2007
Offline
103
pimandr
#7

mishanya84, "Дэти, это невозможно понять, это нужно запомнить "от вас" пишется раздэльно, "квас" - вместе". Тут примерно тоже самое. Погуглите на тему "схлопывания margin".

Почитайте, и если не поймете, почему это так работает, то хотя бы поймете, что с этим нужно смириться и искать обходные пути :)

coolakov.ru/tools (http://coolakov.ru/tools/): определение конкурентов (http://coolakov.ru/tools/most_promoted/), кластеризация запросов (http://coolakov.ru/tools/razbivka/) и т.д.
Яндекс исключил из большого Вероятностное SEO или У Как работает поиск Яндекса
U2
На сайте с 05.02.2011
Offline
69
Us2828
#8

Из-за float это в вашем случае. Или дописывайте к среднему блоку или убирайте от лева и права. Будьте универсальней...)))))))

dma84
На сайте с 21.04.2009
Offline
168
dma84
#9

Скиньте весь код - это раз.

Во-вторых, какой доктайп используете? Если вообще используете.

В-третьих, если вы используете у блоков float, то среднему блоку это свойство тоже необходимо задать, а проще всем трём float:left и родительскому не помешает overflow:hidden

Google: как сделать статические В Мастере отчетов Яндекс.Директа Возможности для брендинга в
[Удален]
#10

Это и есть как бы весь код, каркас с трех колонок

12

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