I am looking for a way to absolutely position a
<div> element within
Is it possible?
Put a realtively positioned div inside the td, with width and height set to 100%, then put the absolutely positioned div inside the relative div.
The td might need to have a specific height attribute set on it for height 100% to work correctly...
You're not using the table for layout purposes though right ;)
You will need to give the
You could create a wrapper DIV with width 100% and height 100% inside the TD, and set it as position:relative, then you can simply do your absolute positioning inside that.
You can also use a number of other workarounds/tricks to emulate absolute positioning:
- If you want your DIV to stick to the right of the td (as in absolute and right:0), set "direction:rtl" in css (direction: right to left - originally for right to left language but useful in this situation).
- If you want your div to stick at the top or bottom of the TD (as in top:0 or bottom:0 in absolute positioning), use vertical-align:top (or bottom) in the CSS for the TD.
- If you don't want the size of your TD to change according to the DIV inside it, set overflow:hidden on the TD and table-layout:fixed on the table. Of course explicitely set the width of the TD and the width and height of the DIV.
- You can arrange the position of your DIV inside the TD using the margins on it.
With all these I believe you can do pretty much anything you can do with absolute positioning, with even one advantage: such a DIV will still trigger the browser scroll-bars when it exits the view-able browser area, as opposed to absolutely positioned DIVs.
That doesn't work, it seems
<td> cannot be positioned relative.
Any ways to bypass it?