Tips on positioning two images in separate locations within a table cell?

I have a cell containing two images. I want one to be centered in the middle of the cell and the other in the top right corner, overlaying the centered image.

My goal is to achieve this layout

https://jsfiddle.net/5bL56a34/

without specifying the left margin, as the centered image may vary in size.

Here is the HTML code I currently have

<table border="1" bgcolor="black"> 
  <tr>
    <td>
      <img src="http://i.imgur.com/zjp0GlD.png" class="centered">
      <img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
    </td>  
  </tr>
  <tr> 
    <td>
      <img src="http://i.imgur.com/zjp0GlD.png" class="centered">
      <img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
    </td>
  </tr> 
</table>

and the CSS

.topRight 
{
  position:absolute;
  left:495px;
}

Answer №1

Perhaps what you're looking for is something along these lines

.topRight {
  position: absolute;
  top: 0;
  right: 0;
}
td{position: relative;}
<table border="1" bgcolor="black">
  <tr>
    <td>
      <img src="http://i.imgur.com/zjp0GlD.png" class="centered">
      <img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
    </td>
  </tr>
  <tr>
    <td>
      <img src="http://i.imgur.com/zjp0GlD.png" class="centered">
      <img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
    </td>
  </tr>
</table>

Answer №2

To align elements to the right, use the right property instead of left and apply position:relative; to the td element.

.topRight {
    position: absolute;
    right: 1px;
    top: 1px;
}

td
{
    position: relative;
}
<table border="1" bgcolor="black">
    <tr>
        <td>
            <img src="http://i.imgur.com/zjp0GlD.png" class="centered">
            <img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
        </td>
    </tr>
    <tr>
        <td>
            <img src="http://i.imgur.com/zjp0GlD.png" class="centered">
            <img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
        </td>
    </tr>
</table>

Jsfiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Interactive dropdown menu with options for different actions

They say a picture is worth a thousand words. I have an idea for a feature I want to add to my Django web application: I want to create a dynamic dropdown list that allows users to add values to the database and dynamically updates itself with the new sel ...

Center aligning two images within a bootstrap column

I have a webpage template in HTML and I'm looking to incorporate Bootstrap into it. Currently, I have two images within a Bootstrap column. I want to ensure that both images remain aligned and adjacent to each other, while also being centered in the m ...

Battle of Cookies and User Preferences: Who Will Prevail?

Recently, I encountered a challenge while developing an ecommerce site. After facing numerous issues, I believe I may have finally found a solution. (For more details on the problem and my question, click here) The expected scenario: Users checkout and p ...

Having trouble retrieving cell values from a table using tr and td tags in C# Selenium is causing issues

I'm facing an issue where my code is unable to retrieve the cell value and instead throws an exception stating: "no such element: Unable to locate element: {"method":"xpath","selector":"html/body/div[2]/div[2]/table/tr[1]/td[0]}" Below is the HTML ma ...

Expand the <div> to match the complete height of its containing <div> element

There are multiple div blocks within a parent block: one for the menu on the left, and one for the text on the right. How can you make the right inner block stretch to the full height of the parent block like the left one? The parent block has a minimum he ...

Shift attention to the subsequent division after a correct radio option or text input has been submitted

I need to enhance the user experience on my form. When a user interacts with specific elements like hitting enter in a text input or clicking a radio button, I want to automatically focus on the next "formItem" division. My form structure is organized as ...

Issues with Jquery/AJAX function not responding to onChange Event

I am currently working on a project where I need to populate a dropdown menu based on the value selected from another dropdown. However, I am encountering an issue with the function that I am trying to call in the onChange event of the select tag. This is ...

What's the best way to iterate through multiple objects within <td> tags using Vue.js?

I have an Array filled with multiple Objects, and now I am interested in iterating through each object as a <tr> within a <table>. I have successfully achieved this. However, some of these objects might contain nested objects. In such cases, I ...

Is there any way to determine if Bootstrap has been utilized to build my WordPress page?

I'm currently contemplating if it's worth incorporating Bootstrap into my pre-existing Wordpress site. During my research, an interesting thought crossed my mind - could the template I'm utilizing already be built with Bootstrap? Although a ...

Revolutionizing Zen Cart with slimMenu

Is there a smarter person out there who can help me understand why the slimMenu is breaking when I add these files to the bottom of the page? <link href="includes/templates/westminster_new/css/age-verification.css" rel="stylesheet"> <script src=" ...

Alignment of grid with absolute images in Bootstrap

Hello there! I am relatively new to the world of coding and also to this platform, so please forgive any mistakes I may make along the way. Recently, I've been working on a project to create a site similar to Picrew, but I seem to have hit a roadblock ...

Is there a way to dynamically update the content of <li> tag with values from an array every x seconds

I am trying to create a li list using jQuery that will update every 2 seconds with new content, similar to game news updates. However, I'm encountering an issue during the first cycle where it skips the second item in the array. The subsequent cycles ...

The content momentarily flashes on the page during loading even though it is not visible, and unfortunately, the ng-cloak directive does not seem to function properly in Firefox

<div ng-show="IsExists" ng-cloak> <span>The value is present</span> </div> After that, I included the following lines in my app.css file However, the initial flickering of the ng-show block persists [ng\:cloak], [ng-cloak], ...

Is there a way to turn off Emmet's CSS Abbreviations feature in Sublime Text 2?

One thing I really enjoy is how Emmet can generate HTML using 'CSS-like' strings. However, I prefer not to use their CSS Abbreviations. For example, when I write the following line of CSS: li a| I expect to get a tab when I press 'TAB&apos ...

HTML Code for Tracking Facebook Friends' Likes on a Page

I am looking to show the number of friends who have liked a page in HTML. Can someone please guide me on this? I am aware that we can get the page likes using a simple URL, but I specifically want to know how to retrieve the count of friends who liked a ...

The styled-components seem to be having trouble injecting the necessary CSS to handle all the various props

I am curious to understand the potential reasons for styled-components not injecting all the necessary CSS into a page's header. In an existing project, I have defined a simple button like this: const Button = styled.button` background-color: ...

Creating a dynamic navbar in an ASP.NET website by populating it with data from a

Seeking guidance on creating a dynamic Bootstrap navbar in an ASP.NET website based on the user's role stored in a database, while maintaining the same style. I have extensively searched for a solution without success. Any assistance would be greatly ...

Generate random unique values from an array to populate a text input field in HTML. Display a message once all unique values have been shown

I have included an option code and text box below: <select id="sel" class="form-control input-lg" data-live-search="true"> <option value="">-- Choose Your Country--</option> </select><br/><br/><br/> &l ...

Ways to send data to a popup in svelte

Hey there, I could really use some assistance with my Svelte app. I'm trying to implement a modal and pass a parameter to the modal component in order to customize its content. However, when using the open() function of Modal, we only need to provide ...

"Comparison: Utilizing HTML5 Video Player with IE8 Embed Fallback versus Implementing Fixed

This dilemma has me at my wit's end. In an HTML5 Video element, I've included an mp4, ogg, and an embedded mp4 fallback. However, on the embed fallback in IE8, all my attempts to position the fixed element (#fixed) above it with z-indexing have f ...