Question

I’ve got a project where I need to top-right align a div so that it sits on top of an existing variable-width td.

What has me stumped is the variable width aspect. I can get the div to sit on top of the existing relatively positioned td by using fixed positioning for the div. However, because the TD width can change I can’t set a “left:” value for the div.

I’ve created a fiddle to demonstrate it with left aligned in the td, now I just need to get it to right align:

jsfiddle.net/ErDr6/36/

I’ve looked at some other posts, but they seem to deal with fixed width elements:

Align div with fixed position on the right side

Answer 1

Firstly, change position: fixed; to position: absolute; so that the arrows won’t stay fixed relative to the viewport when the page scrolls. Then, add the following:

#col_arrow {
    right: 0;
}
.wc-day-column-header {
    position: relative;
}

That will align the arrow to the right of its parent. We add position: relative; to the parent to restrict it to that container.