CSS div content size question

Question

Hello guys!

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

First, 960 isn't a width. Without a units specifier, it's just a number. 960px is a width.

Second, those other divs are positioned correctly, but their widths are 100% (the default), so they just look like they're stacked. The positioning is not noticeable because of that.

Edit: You also misspelled "#fourth" in your CSS selector.

Answer 2

For the forth div, why not use inline-div? [not sure it works on IE7 and below]..and im think the third can be floated to the right. Also shouldn't you be using classes as opposed to multiple elements with the same id?

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

#forth { display:inline-block position:relative; top:0; left:0; }

Answer 3

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.