Question

Is it possible to position one element relative to another specific element using only CSS styles if some of the dimensions are dynamic?

I know I can easily do this with jQuery, but I’m trying to push everything into the stylesheet that I possibly can rather than leaning on javascript.

Here is code that does more or less what I’m trying to accomplish, though I’d like to get rid of the javascript and still have the same effect:

http://jsfiddle.net/EaHU7/

Content:

<div id="reference">
    Some text - lorem ipsum, or short, shouldn't matter.  See CSS
</div>
<div id="relative">
    Relative
</div>

CSS:

div#reference {
    min-height:200px; /* could be thousands of pixels */
    width:500px;
    padding:1em;
    border-style:solid;
    border-width:1px;
}

div#relative {
    width:50px;
    height:50px;
    padding:1em;
    background:orangered;
    border-style:solid;
    border-left-style:none;
    border-width:1px;
}

JS:

var reference = $("div#reference");
var refPos = reference.offset();
var refWidth = reference.outerWidth();
var refHeight = reference.outerHeight();

var relative = $("div#relative");
var relHeight = relative.outerHeight();

relative
    .css({
        "position":"absolute",
        "left":(refPos.left + refWidth) + "px",
        "top":(refPos.top + refHeight - relHeight) + "px"
    })
    .show();

Screenshot:

Answer 1

Yes. There are many ways to do this. you can do it with absolute positioning by placing the orange square within your text div and set its right value to “-50px” and its bottom value to “0px”

    div#reference {
        position: relative;
    }

    div#relative {
        position: absolute;
        right: -50px;
        bottom: 0px;
   }

and your HTML like this:

    <div id="reference">
    Some text - lorem ipsum, or short, shouldn't matter.  See CSS

<div id="relative">
    Relative
</div>
</div>

Try something like this. The orange square should stay at the bottom and to right at all times no matter what the size of the reference div is.