2

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

Community
  • 1
  • 1
salonMonsters
  • 1,237
  • 3
  • 16
  • 26

2 Answers2

3

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.

joshnh
  • 8,374
  • 4
  • 35
  • 53
  • Oops, yes position: absolute makes a lot more sense. Thanks. Unfortunately when I add right:0; it aligns the arrow to the right of the viewport rather than to the right of the td : http://jsfiddle.net/TYGs9/1/ – salonMonsters Nov 23 '11 at 23:04
  • Interesting. What browser is that in? Mac firefox and safari are both displaying the arrow at the far-right of the viewport for me. – salonMonsters Nov 23 '11 at 23:15
  • Chrome, which is the same webkit engine that Safari uses. What do you get with this fiddle? http://jsfiddle.net/sl1dr/4GC6d/ – joshnh Nov 23 '11 at 23:17
  • That is very, very strange. I can't explain that behaviour as the CSS is correct. There must be something else playing up. It's also strange that it works fine for me. – joshnh Nov 23 '11 at 23:24
  • 3
    You can't use `position:absolute` in table cells in Firefox (so no doubt other browsers). You need to assign a div with the `position:relative` and then place the absolute div within that -> http://jsfiddle.net/TYGs9/2/ – My Head Hurts Nov 23 '11 at 23:26
  • Thanks, that div with the relative positioning fixes it for me. Much thanks to you both! – salonMonsters Nov 23 '11 at 23:28
0

If it needs to be dynamic then absolute position can be calculated as:

theTD.offsetLeft+theTD.offsetWidth-arrow.offsetWidth

COBOLdinosaur
  • 284
  • 2
  • 6
  • So, do it as a jquery statement instead of css? – salonMonsters Nov 23 '11 at 23:09
  • yes. Based on the fiddle it looks like you move the arrow with the mouseover. so one arrow that repositions on mouseover as opposed to having to apply a style to every cell. – COBOLdinosaur Nov 23 '11 at 23:16
  • OK, maybe that is the way I should go. Had been hoping to figure out the CSS way to improve my CSS chops :) But I can definitely do in jquery. I have to set the height that way as far as I know so it would make sense. – salonMonsters Nov 23 '11 at 23:22