html + CSS: Make position relative some other element? - html

Question

I'm building a tree using lists in lists the ordinary way.
Now, what I would like to do is to have an extra label
that is absolute (horizontally) to the start of the outermost tree.
The effect I'm trying to achieve is the below, where the farLeft are labels
on each li (see similar html below):
I can easily do this, but my css will be unclean, to say the least, something
along the lines of:
/* each indentaion level is 20 px to teh right, so I need to offset */
ol.topLevel li label.farLeft { position absolute; left=-218px; ...}
ol.topLevel li ol li label.farLeft { position absolute; left=-238px; ...}
ol.topLevel li ol li ol li label.farLeft { position absolute; left=-258px; ...}
A usage could be like the below, but with more nesting levels:
<ol class="topLevel">
<li>
<label>Some niceLabel</label>
<label class="farLeft">Far left text</label>
</li>
<ol>
<li>
<label>Some niceLabel</label>
<label class="farLeft">Far left text</label>
</li>
</ol>
</ol>
The above sucks in many ways, notably I have to change value in plenty of places if I move something, and I have to make one line per indention level.
Is there a better way to solve this, perhaps make my 'left' being the left of my top level tree, or some other good html mechanism.
It might be the time to mention I'm a total css newbie, so I might easily have
missed somethnig completely obvious.

Answer 1

Here its fiddle link
http://jsfiddle.net/5YKFa/6/
css
ol.topLevel{
padding-left: 100px;
}
li{
padding-left: 20px;
}
.left {
position: absolute; left:0px;
}
html
<ol class="topLevel">
<label>Top Level</label>
<li>
<label class="left">Label</label>
<label>1</label>
<ol>
<li>
<label class="left">Label</label>
<label>1.1</label>
</li>
<li>
<label class="left">Label</label>
<label>1.2</label>
</li>
</ol>
</li>
</ol>

Answer 2

Is the 'farLeft class being used elsewhere on the page? If not, the easy solution would be:
.farLeft { position: absolute; left:0px; ...}
Absolute positioning should line up automatically with it's parent container at 0px. So if you wrap a relatively positioned div around it you should be able to adjust margins and whatnot to get the result you are looking for.
You don't need to specify where everything is in the dom structure, unless you only want it to apply there, and even then using an id on the tag would be a better solution. Good luck

Answer 3

You can probably just use a margin on each level of the nesting, so it will grow the deeper you go.