How do I make two images stay relative to eachother? - html

Question

I'd like to tie the two logos at the bottom together so they are in the same position relative to the text.
I'd preferably prefer some kind of explanation as well as just code so I can learn from this.
Relevant HTML:
<div id="twitterdiv"><img id="twitter" src="images/Twitter_white.png" ></div>
<div id="instagramdiv"><img id="instagram" src="images/instagram_white.png"></div>
Relevant CSS:
#instagramdiv {
right: 50%;
position: absolute
}
#twitterdiv {
position: absolute;
right: 55%;
}

Answer 1

Here absolutely positioned element will do the trick. In fact, this is typical situation when one element must be positioned such as "sticky" in relation to some other. Keeping in mind definition of absolute position "The element is positioned relative to its first positioned (not static) ancestor element", all you need to do is wrap your "l" letter and images in the same container (parent), then give the parent container relative position and your images - absolute position and finally set left and top properties (if needed): jsfiddle
<div>app<span class="parentContainer">l
<div class="positionedContainer">
<img id="twitter" src="images/Twitter_white.png"/>
<img id="instagram" src="images/instagram_white.png" />
</div>
</span>
elemontomato</div>