[решено] Див не определяет свой размер - Компьютерный форум OSzone.net

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)

- Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)

- - [решено] Див не определяет свой размер (http://forum.oszone.net/showthread.php?t=109216)

Див не определяет свой размер

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

http://deykun.com

Там есть блок новостей.
Вот такой вот код:

Код:

 * * * * *<div class="news">

 * * * * * *<div class="newsimg"><img src="xvxvc" alt="xcvxvxv" width="100" height="57" /><br />

 * * * * * * * * *05.05.1988<br />

 * * * * * * * * *Категорія:

 * * * * * * * * *Статті

 * * * * * * *</div>

 * * * * * *<div class="newscont">

 * * * * * * *<a href=""><h1>Гаррі Поттер. Журнал &quot;Магічна Правда&quot;. Гогсмід</h1>

 * * * * * * *<p>Гогсмід-Диканька - один із найперших розділів нашого Рольового Форуму. А заснований від був у свій час дуже дивним способом. Влітку 2005-го року, коли форум тільки встановили і головному адміністратору Артеміусу потрібно було виїхати з міста на відпочинок,*головним заступником адміністратора було призначено дуже ініціативну на той час особу — Гієну-Пятністую.<br />

 * * * * * * *Не минуло і місяця, як Артеміус приїхав додому і, зайшовши на форум, побачив найактивніший в обговорюванні розділ – «Секс у Гогсміді» ... 

 * * * * * * *</p>

 * * * * * * *</a>

 * * * * * *</div>

 * * * * * *&nbsp;

 * * * * *</div>

Сам главный див, который все это обьеденяет: class="news"
Не может нормально задаться размером, и это видно, когда делаем бордер.
А если не поставить в конце  , то и вооще все в одну строчку.

Вот стили:

Код:

.news .newsimg {

        width:100px;

        float:left;

        font-size:10px;

}

.news .newscont {

        width:640px;

        float:right;

        font-size:12px;

}



.news p {

        margin:3px;

        padding:0;

}

.news h1 {

        font-size:16px;

        margin:0;

        padding:0;

}

.newscont a:hover {

        text-decoration:none;

        color:#000000;

        background: #FFFF99;

        display:block;

        border: #000000 1px solid;

}

.newscont a {

        text-decoration:none;

        color:#000000;

        display:block;

        padding:1px;

}

.news {

        border: #000000 1px solid;

}

Если у кого то будет свободное время, то прошу обратить внимание.
Спасибо

это довольно известный эффект схлопывания родительского элемента если внутри есть флоатнутые. Решить можно несколькими способами. Первый спозиционировать родительский если можно ,

Код:

.news {

        border: #000000 1px solid;

        position: absolute;

}

или

Код:

.news {

        border: #000000 1px solid;

        float: left;

}

или добавить еще один див внизу который делает clear на все

Код:

<style>



.clear{

        clear: both;

}

  </style>



 <div class="news">

      <div class="newsimg"><img src="xvxvc" alt="xcvxvxv" width="100" height="57" /><br />

       

       </div>

      <div class="newscont">

       

      </div>

      <div class="clear"></div> 

     </div>

Artem-Samsung, садись - два!

плавающие элементы исключаются из обычного контекста отоображения, поэтому <div class="news"> получается пустым (100% ширина; нулевая высота).

тег а не может содержать блочные элементы - хочешь красивостей - используя для аналогичного эффекта javascript

<div class="newsimg"> и вложенная картинка одной ширины - так оставлять нельзя. Надо картинку сделать блочной (тогда и br не понадобится); сбросить отступы и бордюр.

Читайте доки - они рулез!

bruder, большое спасибо за четкое разьяснение, мне помог float, первый метод не подошел... да и послдний я запомню
Busla, Я пытаюсь придерживать This Page Is Valid HTML 4.01 Strict!, хотя бы на троечку не катит?))
Да, недостатков хватает, и благодарен вам за указание на них, а вот по поводу документаций, не могли бы поконкретней, какие бы на ваш взгяд заслуживали бы большего внимания.

Спасибо

На счёт документаций я может слегка перегнул - официальные стандарты пишут скорее для разработчиков броузеров, чем для web-дизайнеров.

Много полезных идей и "разбора полётов" есть в книгах: (ссылки на Озон)
Джеффри Зельдман "Web-дизайн по стандартам"
Дэйв Ши, Молли Е. Хольцшлаг "Философия CSS-дизайна"