How to position text to right?

Question

As you can see from the code snippet below, the text appears below the image. How do I make it so that it appears right next to the image?

#pag{
    margin-top: 20vh;
    margin-right: 60vw;
    height: 30vh;
    width: 45vh;
}

#pa{
    float: right;
    margin-right: 8vw;
    font-size: 60px;
    font-family: Courier;
    margin-bottom: 40vh;
}

<img id="pag" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<p id="pa">Google lorem ipsume lorem ipsumelorem ipsume</p>

http://stackoverflow.com/questions/16568272/why-doesnt-the-height-of-a-container-element-increase-if-it-contains-floated-el/16568504#16568504 ? — Mr. Alien, Nov 05 '15 at 17:45

Alex · Accepted Answer · 2015-11-05T20:16:06.623

One of the solution you can use is floating. You can give float:left; to the image and next element will be sat behind the image.

#pag{
    margin-top: 20vh;
    //margin-right: 60vw;
    height: 30vh;
    width: 45vh;
    float:left;
}

#pa{
    margin-right: 8vw;
    font-size: 60px;
    font-family: Courier;
    margin-bottom: 40vh;
}

   <img id="pag" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
                <p id="pa">Google lorem ipsume lorem ipsumelorem ipsume</p>

Kevin · Answer 2 · 2015-11-05T18:17:09.480

#pag{
    width: 20%;
    vertical-align: top;
}

#pa{
    display: inline-block;
    font-size: 60px;
    font-family: Courier;
    margin-bottom: 40vh;
    margin-left: 15px;
    width: 70%;
    margin-top: 0px;
}

<div>
<img id="pag" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<p id="pa">Google lorem ipsume lorem ipsumelorem ipsume</p>
</div>

Here's another way without using floating elements.

Right now, margin-right: 60vw; is effectively pushing the text to the next line (that's a lot of margin!).

Because a <p> is a block level element, it will always be displayed on it's own line, unless you tell it not to. To do that, you can use the display: inline-block; style.

I would also change the width properties to use percentages, so it's more responsive and scales better.

Ajit Hogade · Answer 3 · 2015-11-05T18:33:28.730

Instead of having css just you can use table here with 2 columns and one row.

The image must be kept in the 1st td and text in another td this will avoid ur css to align text by side of image

For an example

    <table>
    <tr>
      <td>
         <img id="pag" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
      </td>
      <td>
         <p id="pa">Google lorem ipsume lorem ipsumelorem ipsume</p> 
     </td> 
   </tr>
   </table>

keep the table width= 100% and use this the given code. text will aligned to right and image will at left...

How to position text to right?

3 Answers3