/    Sign up×
Community /Pin to ProfileBookmark

Is it possible to position an image relative to another image?

Copy linkTweet thisAlerts:
Jun 28.2006

I know of the relative and absolute positioning methods. But is there a way to take two objects and… Well, put Object Two 20 pixels to the right of Object One, or something along those lines?

EDIT: And, is it possible to stretch something using CSS? Let’s say we have a table, and we set it’s left position 20 pixels further left… and then we set it’s right position 20 pixels further right. What would that do? Would they cancel each other out? Would the command that comes first in the code happen? Or would the object be stretched?

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@nataliemacJun 28.2006 — You can position two elements relative to one another with CSS given that one is nested inside the other.

If you were trying to position two images (or some other elements that could not be nested inside each other) relative to one another, you would need to use JavaScript to get the position of the first element and then set the position of the second element.
Copy linkTweet thisAlerts:
@toicontienJun 28.2006 — The markup:
[code=html]
<div class="imgBox">
<img id="img1">
<img id="img2">
</div>
[/code]
The CSS:
<i>
</i>.imgBox {
position: relative;
}

#img2 {
left: 15px;
position: absolute;
top: 5px;
}

That's a quick and dirty example, but it gives you the basic idea.
Copy linkTweet thisAlerts:
@kessaJun 29.2006 — you would need to use JavaScript to get the position of the first element and then set the position of the second element[/quote]

Neat idea nataliemac (and I'm not disagreeing so don't shoot me ? ) but I not sure it would warrant it in this instance it's it seems a fairly simple layout - plus you get into the wrong "what if Javascript is disabled" issue which we all know and love ?

I haven't tried coding this specifically (so my code might be a little dodgy here) but I think the following should do what you want.

.imgbox {float:left; width:200px; border:1px solid #ccc;}

.imgbox img {float:left; width:80px; border 1px solid #000; margin-right:20px;}

/*if you only want the first image to have a margin right of 20px then just assign it a class and update the stylesheet accordingly*/

Hope that helps?

Kessa
×

Success!

Help @lord-of-shadow 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 5.9,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...