Rahul Menon
Rahul Menon

Reputation: 13

How do I move my text to the right of an image?

My code is displaying:

Current Display

I'd like it to look like this: enter image description here

Html:

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

Upvotes: 1

Views: 108

Answers (3)

Rounin
Rounin

Reputation: 29453

You can achieve your desired layout in 2 quick steps:

  1. Move the <img> to the beginning of div.Row1
  2. Apply float: right; and padding-left: 20px; to the <img>

See:

.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>

Upvotes: 0

Muhammad Junaid
Muhammad Junaid

Reputation: 93

You can use your code with little modification

HTML:

<div class= "Row1">
    <div class="left">
        <h2>Looking for a Job?</h2> 
        <p> 
            Applying to a job can be such a chore.&nbsp;&nbsp;But chore no more!&nbsp;&nbsp;Send me your resume regardless of state and I will do the leg work for you. <br>
            I have helped many people apply to jobs.&nbsp;&nbsp;I am not a paid for recruiter.&nbsp;&nbsp;I will look for your dream job regardless of industry, no kickbacks just your success!
        </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;
}

Upvotes: 4

Nenad Vracar
Nenad Vracar

Reputation: 122027

You can use Flexbox

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

.left, .right {
  flex: 1;
}

.right img {
  width: 100%;
}
<div class="box">
  <div class="left">
    <h2>This is title</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>

Upvotes: 1

Related Questions