За последние 24 часа нас посетил 17771 программист и 1622 робота. Сейчас ищут 1760 программистов ...

помогите с вложенными div

Тема в разделе "HTML и CSS", создана пользователем pr0n1x, 3 сен 2009.

  1. pr0n1x

    pr0n1x Активный пользователь

    С нами с:
    30 мар 2006
    Сообщения:
    486
    Симпатии:
    2
    Адрес:
    Киев
    Здравствуйте.
    Есть следующий html
    HTML:
    1.  
    2. <div id="contentdiv">  
    3.         <div id="leftcol">1</div>
    4.         <div id="rightcol"></div>  
    5.     </div>
    [css]
    #contentdiv {
    width:886px;
    background: #ffffff;
    border:1px solid red;
    }

    #leftcol {
    width:560px;
    padding-left:34px;
    padding-right:38px;
    float:left;
    }

    #rightcol {
    width:254px;
    float:left;
    }
    [/css]

    По идеи div c id=contentdiv должен увеличиваться по высоте взависимости от высоты leftcol и rightcol и оба эти дива должны иметь background: #ffffff; такой как стоит и div c id=contentdiv. Но браузеры отображают contentdiv с 0 высотой вне зависимости какая высота у вложеных дивовов и так же background прозрачный у div c id leftcol и rightcol, в чем тут дело?
     
  2. pr0n1x

    pr0n1x Активный пользователь

    С нами с:
    30 мар 2006
    Сообщения:
    486
    Симпатии:
    2
    Адрес:
    Киев
    Заметил такую особенность, что если сделать код таким:
    HTML:
    1.  
    2. <div id="contentdiv">  
    3.         <div id="leftcol">1</div>          
    4. </div>
    [css]
    #leftcol {
    width:560px;
    padding-left:34px;
    padding-right:38px;
    }
    [/css]

    то есть в #leftcol я убрал свойство float то div#contentdiv начал увеличиваться по высоте в зависимости от дочернего элемента div#leftcol, но как только я опять присваиваю div#leftcol свойство float то родительский элемент div#contentdiv как буд-то не видит своего дочернего и опять высота его равна 0px. В IE все работает, а вот в FF и Opera и Chrome не работает, как это можно избужать?
     
  3. outoftime

    outoftime Активный пользователь

    С нами с:
    27 сен 2009
    Сообщения:
    7
    Симпатии:
    0
    пользоваться стандартным потоком вывода, в котором левая колонка будет слева, если она прописана раньше за правую и также меджу правой и левой колонкой вставить неразрывный див:
    HTML:
    1. <div style="clear:none"></div>
     
  4. outoftime

    outoftime Активный пользователь

    С нами с:
    27 сен 2009
    Сообщения:
    7
    Симпатии:
    0
    и вот еще, для нглядности используйте следующий код, который построен на вашем, для того, что-бы визуально показать ваши ошибки:
    HTML:
    1. <title>JScript testing</title>
    2.  
    3. * {
    4.     margin:0px;
    5.     padiing:0px;
    6. }
    7.  
    8. #contentdiv {
    9.     width:886px;
    10.     margin:50;
    11.     background: #ffffff;
    12.     border:1px solid red;
    13. }
    14.  
    15. #leftcol {
    16.     width:560px;
    17.     padding-left:34px;
    18.     padding-right:38px;
    19.     background: green;
    20.  
    21. }
    22.  
    23. #rightcol {
    24.     width:254px;
    25.     background: silver;
    26. }
    27.  
    28. </head>
    29.  
    30. <div id="contentdiv">  
    31.     <div id="leftcol">&nbsp;</div>
    32.     <div style="clear:none"></div>
    33.     <div id="rightcol">&nbsp;</div>  
    34. </div>
    35.  
    36. </body>
    37. </html>
    вы не использовали на тестах знак неразрывного пробела, и некоторые браузеры просто не читаю ваш див, буд-то его нет, во-вторых: видно, что хотя по пикселях дивы совпадают, но на самом деле ширина вложенных - больше главного.
    в связи с этим, когда вы пытаетесь позиционировать два внутренних дива в одной строке - вылетает ошибка и главный див не включает в себя дочерние элементы.

    будут догадки пишите на мыло: outoftime_92@mail.ru, или skype - outoftime_92