Is there a way to align my text to the right of an image?

Question

Is there a way to align my text to the right of an image?

My current code is displaying an image https://i.sstatic.net/Nmnr6.jpg

I want it to show a different image instead: https://i.sstatic.net/MH7sR.jpg

This is the HTML code I'm using:

</div>
    <div class= "Row1">
      <h2>Looking for a Job?</h2> 
      <p> Applying to a job can be tedious. Let me do the work for you! Send me your resume regardless of location, and I'll help you find your dream job in any industry. No kickbacks, just your success!</p>
            <img src= "http://laura.finance/img/road.png">
</div>

html css

Answer 1

Answer №1

To implement your code, just make a few minor adjustments

HTML:

<div class= "Row1">
    <div class="left">
        <h2>In Search of Employment?</h2> 
        <p> 
            Searching for a job is no easy task. Let me handle it for you! Submit your resume, regardless of your location, and I will assist you in finding the perfect job opportunity. <br>
            I have helped countless individuals in their job search journey. I am not a paid recruiter, and I am dedicated to helping you succeed in your career, without any hidden agendas!
        </p>
    </div>
    <div class="right">
        <img src= "http://laura.finance/img/road.png">  
    </div>
    <div class="clearfix"></div>   
</div><!-- End row -->

CSS:

.Row1{
  padding: 15px;
  background-color:red;

}
.right img{
    width: 100%;
}
.left{
  Float:left;
  Font-size: 30px;
  width: 70%;
}
.right{
    float: right;
    width: 30%;
}
.clearfix{
    clear: both;
}

Answer 2

To implement your code, just make a few minor adjustments

HTML:

<div class= "Row1">
    <div class="left">
        <h2>In Search of Employment?</h2> 
        <p> 
            Searching for a job is no easy task. Let me handle it for you! Submit your resume, regardless of your location, and I will assist you in finding the perfect job opportunity. <br>
            I have helped countless individuals in their job search journey. I am not a paid recruiter, and I am dedicated to helping you succeed in your career, without any hidden agendas!
        </p>
    </div>
    <div class="right">
        <img src= "http://laura.finance/img/road.png">  
    </div>
    <div class="clearfix"></div>   
</div><!-- End row -->

CSS:

.Row1{
  padding: 15px;
  background-color:red;

}
.right img{
    width: 100%;
}
.left{
  Float:left;
  Font-size: 30px;
  width: 70%;
}
.right{
    float: right;
    width: 30%;
}
.clearfix{
    clear: both;
}

Answer 3

Answer №2

If you want to layout elements using Flexbox

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.left, .right {
  flex: 1;
}

.right img {
  width: 100%;
}

<div class="container">
  <div class="left">
    <h2>Title Goes Here</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione saepe, dolorum alias facere numquam sit explicabo rem hic mollitia. Quas suscipit odio est, temporibus error labore! Porro asperiores officiis dicta.</p>
  </div>
  
  <div class="right">
    <img src="http://placehold.it/400x400">
  </div>
</div>

Answer 4

If you want to layout elements using Flexbox

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.left, .right {
  flex: 1;
}

.right img {
  width: 100%;
}

<div class="container">
  <div class="left">
    <h2>Title Goes Here</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione saepe, dolorum alias facere numquam sit explicabo rem hic mollitia. Quas suscipit odio est, temporibus error labore! Porro asperiores officiis dicta.</p>
  </div>
  
  <div class="right">
    <img src="http://placehold.it/400x400">
  </div>
</div>

Answer 5

Answer №3

If you want to customize your layout quickly, follow these two easy steps:

Start by moving the <img> to the beginning of div.Row1
Then, add float: right; and padding-left: 20px; to the <img>

Take a look at the code snippet below:

.Row1 > img {
float: right;
padding-left: 20px;
width: 200px;
}

<div class="Row1">
<img src="http://laura.finance/img/road.png" alt="A remote track through fields" />
<h2>Looking for a Job?</h2>
<p> Applying to a job can be such a chore. But chore no more! Send me your resume regardless of state and I will do the leg work for you.</p>
<p>I have helped many people apply to jobs. I am not a paid for recruiter. I will look for your dream job regardless of industry, no kickbacks just your success!</p>
</div>

Answer 6

If you want to customize your layout quickly, follow these two easy steps:

Start by moving the <img> to the beginning of div.Row1
Then, add float: right; and padding-left: 20px; to the <img>

Take a look at the code snippet below:

.Row1 > img {
float: right;
padding-left: 20px;
width: 200px;
}

<div class="Row1">
<img src="http://laura.finance/img/road.png" alt="A remote track through fields" />
<h2>Looking for a Job?</h2>
<p> Applying to a job can be such a chore. But chore no more! Send me your resume regardless of state and I will do the leg work for you.</p>
<p>I have helped many people apply to jobs. I am not a paid for recruiter. I will look for your dream job regardless of industry, no kickbacks just your success!</p>
</div>

Is there a way to align my text to the right of an image?

Answer №1

Answer №2

Answer №3

Similar questions

What steps can I take to ensure that my collapsible menu is both dynamic and easily accessible

adjust the size of a form field to match the background image dimensions

Utilize identical animations across various elements

What is the best way to alter the BackColor of a dropdown list item depending on the variance between the date on the list and the current

Aligning HTML form elements side by side

VBA Hover Clickthrough Technique

Angular - Dividing Values within Input Arrays

A-Frame VR: Image missing from display on Chrome browser

What are some ways to create a flashing effect for text in HTML and JavaScript?

Can someone provide a method to automatically align bootstrap 5 footers within a set of cards?

Is it possible to animate CSS Grid components?

Generating an HTML table using an array retrieved from a PHP execute_db function, displaying repeated entries

node js returning undefined value

Is it possible to place a secondary read more button next to the first one using CSS?

I am having difficulty organizing my text into two grid columns and aligning it in the center

Here's a tutorial on creating a dropdown menu containing a list of years. When a specific year is selected, the table will display the individuals who registered during that year using PHP

What is the method used to incorporate the radial gradient in this design?

Text element in SVG not displaying title tooltip

capturing a different attribute within the same <tr element using web scraping techniques in VBA

Capturing and saving detailed hand-drawn artwork in high resolution