Div style is not applied

Question

I am working on a small agenda schedule sample, I've build a small html sample with impeded style sheet in the head of the page.

Simply, its a wrapper div that works as a container of other divs, those divs are the schedule items, each one of these items divs consists of two sides; left floating div and right floating div

The problem I'm facing is with setting the width of those floating divs, but css is not being applied, and it is being inherited from a parent div.

Here is a screenshot of what is happening:

here is my sample code:

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>

I couldn't figure out whats wrong with my code, I've searched, and tried a lot of scenarios. but with the same results.

And if I try to edit my css from the browser to set the width or the float, the divs goes crazy!

Answer 1

I don't really understand what you are trying to achieve but if what you are trying to do is to float AgendaItemDetailsContainerDiv to the right, as per the css declaration below...

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

you simply has to remove the text you added above the css class declaration because it is not a proper css comment. That's why the style is not applied. You use proper css comment blocks as below...

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

The same applies to all other incorrectly formatted comments in your css stylesheets