Include a character on the right side without shifting the text to the left

Below is the HTML code I am currently working with:

    <div class="last_img">
        <p>Galutinė žetono išvaizda:</p>
        <span class="zetin11">A</span>
        <span class="zetin12">A</span>
        <span class="zetin13">A</span>
        <span class="zetin14">A</span>
        <span class="zetin15">A</span>
        <img class="last_img_img" src="images/img1.png" alt="">
    </div>

Currently, when I add text it causes the text within the span tag to move leftwards and outside of the image. How can I make sure that only the letter appears on the right side without causing the text to shift left?

Here is the CSS styling for zetin11:

position: relative;
    top: -125px;
    right: -79px;
    font-family: Courier;
    font-size: 18px;
htmlcss

Answer №1

Based on my interpretation of the question, it seems like you are looking to align the A's to the right without affecting the rest of the paragraph. If that is indeed the case, you can achieve this by using the following CSS code:

span{
   float: right;
}

To see this in action, you can check out the working example on JSFiddle: https://jsfiddle.net/uniqueusername/examplelink/

Answer №2

If I were to approach this, I would handle it in the following manner:

HTML

<div class="last_img">
  <p>Final appearance of the token:</p> <br />

  <div class="imagecontainer">
    <img class="last_img_img" src="https://i.imgur.com/I86rTVl.jpg" alt="" />
  </div>

   <!-- Separate them into different classes for styling purposes later on -->

  <div class="spancontainer">
    <span>A</span>
    <span>A</span>
    <span>A</span>
    <span>A</span>
    <span>A</span>
  </div>

</div>

CSS

.last_img{
    width: 100%;
}

.imagecontainer{
  float: left;
}

.spancontainer{
  float: right;
}

Here's a JS Fiddle Example for reference

In summary: I decided to create separate divs for better CSS control.

I designated the image container div to float left so the image aligns to the left.

The span container div was set to float right for alignment next to the image.

By creating a global 'last_img' class, I achieved overall control and specified a 100% width. The unnecessary 'zetin' classes were removed since each span didn't require individual styling ;)

Hopefully, this explanation proves useful!

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

I'm attempting to create a dropdown menu, but I'm struggling to keep it open when I hover over an option

Seeking assistance as a beginner in coding. I am struggling with creating a dropdown menu option on my website. The issue is that the menu closes whenever I attempt to move my mouse to select other options. It seems to work fine when using the run option h ...

htmlcss

Display the value of a shortened string

My Goal I aim to develop a method for determining the amount of a string visible before it gets cut off. Motivation In my project, there is a collection of items that can be chosen. A panel presents a concatenated string of the selected item names separa ...

javascripthtmlcssangular

Border shifts on hover effect

After much trial and error, I finally managed to center two links in a nav bar perfectly on the page. I also added a grey bottom border that spans the entire width of the page, with the hover effect turning it blue under the links. Check out this example: ...

csshoverborder

`` I am experiencing a problem with CSS display block in Internet Explorer

Looking to implement a basic tab menu using a combination of tables and div elements. The goal is to have the tabs switch styles when clicked, giving the appearance of being toggled, while also swapping out the corresponding content in separate div blocks ...

javascripthtmlcssinternet-explorertabs

Is it possible for CSS to automatically style paragraphs based on the preceding heading class?

Looking to create some unique CSS rules for formatting interview transcripts. The format I have in mind is as follows: <h2 class="interviewer">Alice: [00:00:00]</h2> <p>Is it ok if I ask you a question now?</p> <h2 class="inter ...

csshtml-heading

how to quietly change the focus of an element using jquery and css?

Whenever I modify the CSS of a scrolled-past element, the view abruptly jumps to that particular div (by scrolling up) upon applying CSS changes using .css(...). Something as simple as adjusting the background-color can trigger this effect. Is there a wor ...

jquerycss

The hover selector in Material UI and React is not functioning as expected

My code is experiencing an issue where the hover selector does not appear to be working. Although all other styling aspects function correctly, the hover effect is not visible. import React from "react"; import Paper from '@material-ui/core/Paper&apo ...

cssreactjshovermaterial-ui

Angular Oops! We ran into a small hiccup: [$injector:modulerr]

I am facing an issue with an angular js error angular.js:36 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.19/$injector/modulerr?p0=app&p1=Error%3A%20…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.19%2Fangular.min.js%3A18%3A139) ...

javascripthtmlangularjswordpress

Showcasing the information stored within my li element, I am able to access and view the data through my console

I want to showcase the data in the browser Upon hitting the api call, I retrieve the data in my console. The challenge lies in displaying the data within my li tag. Below are snippets of my relevant code and the entire code can be found in the gist links p ...

javascripthtmlangularangular2-templateangular6

Personalizing the mat-checkbox

I'm trying to customize the checked icon in angular material mat-checkbox. Currently, it displays a white tick icon inside a colored background box, but I want to replace the tick with a cross when it is checked. After spending all day searching, I ha ...

cssangularangular-material

Having trouble repositioning a div element in CSS

I am having an issue with my code. The problem I'm facing is that I am unable to move the green div.free_space below the other two divs, div.main_pic and div.navigation. I don't understand why this is happening. As I am still learning, I would g ...

htmlcss

Issue with an Angular filter for formatting a lengthy JSON string onto separate lines within an HTML document

Just starting out with coding and working in Angular, I'm trying to display JSON data from Firebase in HTML. Here's the specific call I'm using: <p>{{workout[0].box.info.training.strength.exercise[1].movement.freetext }}</p> Th ...

javascripthtmljsonangularjs

What are the steps to resize a YouTube embedded video?

I am currently attempting to use a YouTube video as the background for breadcrumbs on my website. However, I am facing an issue with setting the video width to cover the full screen. The image below shows that the video is displayed in the center of the if ...

htmlcssvideoiframeembed

What is the best way to position the header at the top and the footer at the bottom of the page, with the main content in between using

Recently, I started using Bootstrap and incorporated Bootstrap 5.3 into this HTML page. My goal is to align the header at the top, footer at the bottom, and adjust the size of the main content in between. Here's the code I attempted: <!DOCTYPE html ...

htmlbootstrap-5

Activating events with Jquery

Can anyone help me with this HTML and jQuery issue I'm facing? When I click on an image for the first time (when it has the class 'hide'), the first jQuery click function is executed. However, when I click on the image again, the second func ...

javascriptjqueryhtmltriggersclick

Dynamic HTML element

I created an input number field and I want to dynamically display the value of this field in a container without having to refresh the page. I am currently using ajax for this purpose, but unfortunately, I still need to reload the page. HTML: < ...

javascripthtmljqueryajaxdynamic

The mdb navigation bar seems to constantly change its height

Having an issue with the height of my mdb navbar in my Angular app. It randomly flips to a larger size when reloading the page, but returns to normal when I open the developer console in Chrome. Two screenshots show the correct display and the incorrect i ...

cssangularmdbootstrap

The positioning in CSS is not functioning as expected in a customized component

https://codesandbox.io/s/71j1omvz66 Struggling to shift the chat component to a new position. Any ideas on how to make it move? ...

cssreactjs

Preserving the selected options in a dynamically populated dropdown list after submitting a form using php

I am attempting to preserve form values even after submitting the form. document.getElementById('start_date').value = "<?php echo $_POST['start_date'];?>"; document.getElementById('end_date').value = "<?php echo $_P ...

javascriptphpjqueryhtml

The attempt to change the header's background color has proven to be unsuccessful

Hello this is my first question on stackoverflow so please forgive my lack of experience. I am attempting to modify the background color of an entire HTML document using the background-color property on the element. Despite changing some parts of the docu ...

htmlcssasp.net-mvcbootstrap-4