Div style не применяется

Question

Я работаю над небольшим образцом расписания повествования, я создал небольшой образец html с препятствующей таблицей стилей в начале страницы.

Просто, его оболочка div, работающая как контейнер других div, те divs являются пунктами расписания, каждый из этих элементов divs состоит из двух сторон; левый плавающий div и правый плавающий div

Проблема, с которой я столкнулся, заключается в установке ширины этих плавающих div, но css не применяется и наследуется от родительского div.

Вот скриншот того, что происходит:

вот мой пример кода:

CSS:

 .HeaderDiv 
     { 

     } 

     .SeparatorDiv 
     { 
      clear: both; 
     } 

     .AgendaItemsContainerDiv 
     { 
      width:800px; 
      padding:25px 50px; 
      text-align:center; 
      margin:auto; 
     } 

     .AgendaItemDiv 
     { 
      width: 700px; 
      height: 200px; 
      clear: both; 
     } 

      <!-- Agenda Item : speakers area --> 

      .SpeakersContainerDiv 
      { 
       float:left; 
       width: 200px; 
      } 

      .SpeakerItemDiv 
      { 
       float:left; 
       width:120px; 
       padding:2px 3px; 
       margin:0px; 
      } 

      .SpeakerImgDiv 
      { 
       border-style:solid; 
       border-width:1px; 
       width: 120; 
       height: 120; 
      } 

      .SpeakerMoreInfoDiv 
      { 
       width: 120; 
      } 
      <!-- Agenda Item : text area --> 
      .AgendaItemDetailsContainerDiv 
      { 
       float: right; 
       margin:0px; 
       padding:0px; 
      } 

      .AgendaItemTextDiv 
      { 
       floar: left; 
       position:relative; 
       margin:0px; 
       padding:0px; 
       height:auto; 
       right: 90px; 
      } 

      .AgendaItemTextDiv > span 
      { 
       padding-left:20px; 
      } 

      .AgendaItemrButtonsDiv 
      { 
       position:relative; 
       bottom: 0px; 
      } 

HTML:

<div class="AgendaItemsContainerDiv"> 
    <!-- Agenda items container div--> 

     <div class="AgendaItemDiv"> 
     <!-- Agenda item div --> 

      <div class="SpeakersContainerDiv"> 
      <!-- Agenda speakers container div --> 

       <div class="SpeakerItemDiv"> 
        <!-- Speakers item div --> 
        <div class="SpeakerImgDiv"> 
         <!-- Speaker img div --> 
         Speaker 1 Image here 

        </div> 
        <div class="SpeakerMoreInfoDiv"> 

         Speaker info 

        </div> 
       </div> 

       <div class="SpeakerItemDiv"> 
        <!-- Speakers item div --> 
        <div class="SpeakerImgDiv"> 
         <!-- Speaker img div --> 
         Speaker 2 Image here 

        </div> 
        <div class="SpeakerMoreInfoDiv"> 

         Speaker info 

        </div> 
       </div> 

      </div> 

      <div class="AgendaItemDetailsContainerDiv"> 
      <!-- Agenda desc container div --> 

       <div class="AgendaItemTextDiv"> 
        <!-- Agenda header and details div --> 
        <h2> 
         Topic title here 
        </h2> 
        <span> 
         Details about this topic 
        </span> 
        <div> 
         Time, from: 10:15 to 10:30 
        </div> 

       </div> 

       <div class="AgendaItemrButtonsDiv"> 
        <!-- Click for more info div --> 
        More Info... 
       </div> 

      </div> 

     </div> 

    </div> 

Я не мог» t выяснить, что случилось с моим кодом, я искал, и попробовал много сценариев. но с теми же результатами.

И если я попытаюсь отредактировать свой css из браузера, чтобы установить ширину или поплавок, divs сходит с ума!

Answer 1

Я не очень понимаю, что вы пытаетесь достичь, но если то, что вы пытаетесь сделать, это плавать AgendaItemDetailsContainerDiv вправо, согласно декларации CSS ниже ...

<!-- Agenda Item : text area --> 
.AgendaItemDetailsContainerDiv 
{ 
     float: right; 
     margin:0px; 
     padding:0px; 
    } 

вас просто должен удалить текст, добавленный выше объявления класса css, потому что это не правильный комментарий css. Вот почему стиль не применяется. Вы можете использовать собственные CSS блоки комментариев, как показано ниже ...

/* Agenda Item : text area */ 
.AgendaItemDetailsContainerDiv 
{ 
    float: right; 
     margin:0px; 
     padding:0px; 
    } 

То же самое относится и ко всем другим неправильно отформатированные комментарии в ваших CSS стилей