/    Sign up×
Community /Pin to ProfileBookmark

positioning a div relative to a table cell

Copy linkTweet thisAlerts:
Mar 02.2006

I need to position a div relative to a table cell. The div needs to be 30 pixels beneath the table, aligned with the left side of the second column. So I want to get the cow div, just below the table cell moo

The table and div have been simplified, both table and div are positioned using css:

<table><tr>
<td class=”labelStyle”>Status</td>
<td><input id=”moo” blah-blah</td>
</tr></table>

<div class=”opButtons” id=”cow”> <a onclick=”createOperator()”>Apply</a></div>

I’ve looked at a function that returns the upper left of moo and then tried to position cow based on it, but I think I’m using five different approaches and they are all either wrong or interfering with each other and seem to be getting nowhere.

Viking

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@phpnoviceMar 02.2006 — Something along these lines:

var ele = document.getElementById("moo");

var h = ele.offsetHeight;

var x = ele.offsetLeft;

var y = ele.offsetTop;

while (ele=ele.offsetParent) {

x += ele.offsetLeft;

y += ele.offsetTop;

}

ele = document.getElementById("cow").style;

ele.position = "absolute";

ele.zIndex = 1;

ele.left = x + "px";

ele.top = (y+h+30) + "px";
Copy linkTweet thisAlerts:
@vikingdudeauthorMar 02.2006 — I had the basic idea right, but in computer issues, that doesn't matter.

I was doing:

x = 400

ele.left = x

and was forgetting: + "px". When positioning with css, I always use a unit, don't know why I didn't think of that here.

Hey, thanks, you've saved me a lot of time.
Copy linkTweet thisAlerts:
@phpnoviceMar 02.2006 — You're welcome.

Cheers.
×

Success!

Help @vikingdude spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...