Q:

Reference text location with css

Right now I'm working to insert a new element in an old template and I'm having some issues. Basically there area  bunch of already defined css rules elsewhere that make it very difficult for me to exactly position my divs as I would like.
Is it possible to somehow reference a div that represents the location where the text is actually rendered? I don't actually care much if the solution is in javascript or css, but logically css seems like the right location for this feature.
Example:
<div>
    <div style="text-align:right">Content</div>
</div>

In that example there would be a large div spanning the width of the page, but I really only want something that directly deals with the comparatively small area in which the text actually exists. Is this possible?
Specifically what I'm looking to do is ensure that a new type of element I'm adding to an existing template (think navigation tabs) will be extremely modular. I'd like to be able to use very different description lengths for these tabs and be able to apply backgrounds to them without prior knowledge of their DOM parents (I can put anything new within them, but the current layout means this would have to work within some random div and also within some random span)

A:

I feel deeply silly about this, but I'm going to go ahead and post this answer in case somebody else searches this in the future. jQuery in fact has a trivial solution for this.
Example:
<div>
    <div id="id" style="text-align-right">Some Text</div>
</div>

$(document).ready(function(){
    $("#id").wrapInner("<span id=renderedTextWrapper" />);
    $("#renderedTextWrapper").//do whatever you want with it
}

Once you've got that element it's pretty easy to do whatever you like. To get around the issue of having to insert this into random DOM locations I just wrapped my text in a div and made sure it wasn't escaped when it was passed to the template.

