How can you position text to the right of an image using CSS?

Trying to right-align text next to an image;

CSS

.p1 {
      position: absolute;
      width: 100px;
      height: 50px;
      top: 40%;
      left: 70%; 
}

HTML

<img src=../images/diagram1.png alt="Diagram"/>
<span class="p1">This is a testtttttttttttttttttttttttttttttt </span>

The code seems to work well with short text, but when there's a lot of text, it becomes squished and looks like one long paragraph. See below for example;

[image] [tes
         ttt
         ttt
         tt]

I'm looking to have the text display as a regular paragraph block instead.

[image] [testttt
         ttttttt]
csshtml

Answer №1

Hello @Eggy, could you kindly check out this fiddle

.container{
    width:100%;
    overflow:hidden;
}
.container img{
    display:inline-block;
    margin-right:20px;
    float:left;
}

Answer №2

An easy solution is to eliminate the absolute positioning and change the displays of the image and text to inline-block. You might also consider adjusting the width of the paragraph or removing it altogether: Check out this JS Fiddle example

Here is the CSS code:

img {
    display: inline-block;
}
.p1 {
    display: inline-block;
    height: 50px;
    width: 300px;
    top: 40%;
    left: 70%;
}

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

Creating multiple nested ng-repeats in an AngularJS table

Managing a large amount of data on users' availability by hour for multiple days can be challenging. The data is structured as follows: availData = { "date1":arrayOfUsers, "date2":arrayOfUsers, ... } arrayOfUsers= [ userArray, userArray, ... ] user ...

javascripthtmlangularjs

Leveraging the jQuery click function to toggle elements on a webpage by referencing the current element with the keyword "this

I've been trying to implement a click event that toggles an element unrelated to the selected item's parent or child. I want to utilize "this" because there are multiple elements with the same class where I'd like to apply the same jQuery cl ...

jqueryhtmltoggle

How can I use CSS in Next.js to style a child element when its parent is being hovered over?

Here is the CSS code that specifically targets the child element "#overlay" when its parent, ".collection", is being hovered over: .collection { position: relative; overflow: hidden; } .collection:hover #overlay { position: absolute; opa ...

cssreactjsnext.js

Challenges with conflicting CSS styling issues

I am facing a CSS issue on my website. I am trying to add captions for images on my site. I have experimented with the jquery-capty plugin () and some custom CSS styles for framed images (). While both solutions work in my regular layout, they do not funct ...

jqueryhtmlcss

Integrating dynamic transition effects using Jquery Mobile for <div> elements

Just a friendly reminder, I must admit that my knowledge of Javascript is quite limited. I received a script from Padilicious to implement swipe navigation on my Jquery Mobile Site. It involves adding functions to a div tag like this: <div data-ro ...

javascripthtmlcssanimationjquery-mobile

Issue with Vuetify v-alert not appearing after updating reactive property

I am trying to set up a conditional rendering for a v-alert if the login response code is 401 Unauthorized. Here is how I have defined the alert: <v-alert v-if="this.show" type="error">Invalid email and/or password.</v-alert> Within the data ...

javascripthtmlvue.jsvuejs2vuetify.js

Tips on connecting data within a jQuery element to a table of data

I am currently developing a program that involves searching the source code to list out element names and their corresponding IDs. Instead of displaying this information in alert popups, I would like to present it neatly within a data table. <script> ...

javascriptjqueryhtmlasp.nethtml-table

What is the best way to make sure my navigation menu adapts to changes in my div size

Just curious, how can I make my navigation menu adjust its width to match the div box? Any help would be appreciated! If you'd like to see an example, here's a jsfiddle link: http://jsfiddle.net/AtM2Q/ Below is the code snippet: <html> & ...

htmlcssnavbar

Managing ajax requests for lazy loading while scrolling through the middle of the window can be a challenging task. Here are some tips on

I have implemented Lazy loading in my Project. I found a reference at which explains how to make an ajax call after scrolling and image upload with slow mode without allowing scrolling until the loader is shown. The code snippet I am using is as follows: ...

javascriptjqueryhtmlajaxasp.net-mvc

Angular JS Tab Application: A Unique Way to Organize

I am in the process of developing an AngularJS application that includes tabs and dynamic content corresponding to each tab. My goal is to retrieve the content from a JSON file structured as follows: [ { "title": "Hello", "text": "Hi, my name is ...

javascripthtmlangularjs

Tips for concealing a chosen alternative from the menu of options when utilizing mat-select

I am currently working with the latest version of mat-select, version 16. I have a requirement where, when a specific option is selected and the select drop-down is clicked again, that selected option should not appear in the options list. Below is the HTM ...

htmlcssangularmat-select

Utilizing Ajax to fetch a div element from a web page

Hey there! I have a link set up that loads a page into a specific div ID, which is #ey_4col3. The issue I'm facing is that it loads the entire page along with all its contents, but what I really want to load from that page is just the content within ...

javascriptjqueryhtmlcssajax

Enhancing design precision from Figma to flawless pixels

I'm facing the challenge of converting a figma design into an HTML and CSS template with a fixed dimension of 1440px. I'm unsure about where to begin coding in terms of screen size - should I start at 1440px and scale down/up, or begin with mobil ...

htmlcssfrontendfigmapixel-perfect

The link that has been clicked on should remain in an active state

Is there a way to make the link that is clicked on active? I have attempted various scripts but have had no luck in getting the desired effect. Can anyone identify what might be causing the issue? $("a").click(function () { if ($(this).hasClass("acti ...

javascripthtmljquerycss

Issue with AngularJS URLs not functioning properly when using HTML5 mode

Utilizing the AngularJS SPA template in Visual Studio. In my app.js file, I have the following code: $stateProvider .state('touranalysis', { url: '/touranalysis', templateUrl: '/views/touranalysis/index', ...

htmlangularjs

Presenting CSV data in a tabular format using Angular and TypeScript

I am facing an issue with uploading a CSV file. Even though the table adjusts to the size of the dataset, it appears as if the CSV file is empty. Could this be due to an error in my code or something specific about the CSV file itself? I'm still learn ...

htmlangulartypescriptnpm

Pattern to filter out numeric values from a collection

I want to apply a regex pattern to the <input> form element. The pattern should specify a range of numbers that are not permitted as input. For example, let's say I have a list of numbers like {1,4,10}, and any number other than these should be a ...

htmlregex

What is the best way to style the currently selected option element in a select dropdown?

I am trying to change the font color of specific option elements within a select dropdown by adding style="color: #D4D4D4". When I apply this style directly to an option element like <option value="TEST" style="color: #D4D4D4">TEST</option>, it ...

javascriptjqueryhtmlcss

Display the title of an image beneath the image using CSS

Since upgrading my CMS, I've encountered an issue where the captions of images are not showing below the image for thousands of articles. For example: <img src="123.jpg" alt="Texttext" class="caption" style="disp ...

csstitlecaption

Creating an animated full-width SVG with a background image

This has been quite a challenge for me. I have successfully implemented the main functionality that I wanted in this codepen. The SVG is divided into 3 sections, with the middle section sliding away from the others when you click the "Find Out More" button ...

jqueryhtmlcssanimationsvg