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

Question

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]

css html

Answer 1

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

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 3

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%;
}

Answer 4

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%;
}

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

Answer №1

Answer №2

Similar questions

Using HTML nested lists in Wordpress sites

Having trouble with utilizing pako.js in your JavaScript code? The error "Pako is not defined

Upon the page loading, only select a handful of checkboxes (JSF)

Do not let CKEditor interact with widget content

Regex: Identifying all URLs except for those with ".js" or ".css" included

Incorporate ng-click as an attribute in AngularJS

An HTML/CSS component that dynamically adjusts its height at random intervals

Is there a solution for the issue where the :after pseudo-element on a TD in IE9 does not accurately reflect the TD height?

What is the best way to eliminate extra space at the bottom of glide.js?

Tips on steering clear of the issue of "Automatic grid alignment" when working with Bootstrap?

Maintain the visibility of the jQuery dropdown menu even when navigating to a different page within the

What is the best way to send multiple values from the view to a method without using two-way binding?

Is it possible to refresh a div on one .aspx page using content from another .aspx page?

What is the best way to use jQuery to animate a particular height up to 100%?

The v-menu closes before the v-list-item onclick event is detected

Is there a way to showcase views.py outcomes promptly and dynamically on template.html within a Django project?

Skip nodes in Polymer 1.0 by using ExcludeLocalNames

Is there a different method like Calc() to create a static sidebar alongside content?

The HTML table is displaying with an offset, which is probably caused by the *ngFor directive

What are the steps to create a responsive form using CSS?