Home/ Questions/Q 8571453
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T18:47:06+00:00

The floating element has following structure: <a>The_button</a> <div style=position:absolute> <div style=position:relative class=inner-box> Content Content

  • 0

The floating element has following structure:

<a>The_button</a>
<div style="position:absolute">
    <div style="position:relative" class="inner-box">
       Content
       Content
       Content
       Content
       Content
    </div>
</div>

The content of multiple inner-box controls has variable length, so the inner-box’es have variable height. I want to define CSS class .inner-box (without JavaScript) so that the lower right corner of the inner-box will be positioned in relation to upper-left corner of the link. Is this possible?

Target browsers are IE8+, Firefox, Chrome, Opera, Safari.

Links have always the same height and width.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The only solutions I could come up with so far are:

    http://jsfiddle.net/fmVz6/ – this requires a height and width to be defined on the “outer-box”, not the inner-box (the inner must be absolutely positioned too).

    Working on a second one at the moment …

    http://jsfiddle.net/fmVz6/1/ – this one does not require a height or width specified, it simply needs something inside the parent div (e.g. a space) to see the effect, otherwise the background doesn’t appear.

    Okay, to have it appear top-left of the link, http://jsfiddle.net/H5G8r/1/ (Requires some rearrangement of your HTML).

    This one requires no width to be defined, and doesn’t break the words onto multiple lines:
    http://jsfiddle.net/H5G8r/2/

    Take your pick 🙂

    • 0