Question

I have a structure like this

<div id="first">
  <div id="second">
    <div id="third">
      <div id="fourth">
        text
      </div>
      <div id="fourth">
        text2
      </div>
    </div>
    Some other stuff...
  </div>
</div

Here’s the css for it at the moment:

#first {
 width:960;
}

#second {
 position:relative;
}

#third {
 position:relative;
 top:0;
 right:0;
}

#forth {
 position:relative;
 top:0;
 left:0;
}

Now I would like from the fourth items to stay in a row and from the third item to stay on the right side of the second div. The second div also has a width 960 like the first one.
What’s the problem with this? why it isn’t working?

Answer 1

Edited and should work(untested):

<div id="first">
  <div id="second">
    <div id="third">
      <div class="fourth"> <!-- changed to class -->
        text
      </div>
      <div class="fourth"> <!-- changed to class -->
        text2
      </div>
    </div>
    Some other stuff...
  </div>
</div> <!-- was missing closing bracket -->

And the style:

#first {
 width:960px; /* was missing px */
}

#second {
 position:relative;
}

#third {
 float:right  /* Makes the element float on the right side. Might want to clear in a later id/class to avoid quirks */
 position:relative;
 /* Removed redundant top:0; and right:0; */
}

.fourth {  /* Changed to class and fixed spelling */
 position:relative;
 /* Removed redundant top:0; and right:0; */
}

ID’s should be used for elements that will only be used once. Classes should be used for elements that can/will be used multiple times.