CODEWITHSUNDEEP
htmlcss
Zane Z
Zane Z

Reputation: 233

Paragraph next to image

I am trying to get the text to line up correctly next to my image. This is what I have tried but it is throwing the text off making the spacing very unpleasant to the eye. Any help with this would be greatly appreciated.

<p><img src="../../images/stop.jpg" style="width:40px;height:40px;">Your transaction requires special instructions from our office.  Please complete this Special Handling form, and we will contact you within three business days to provide assistance.  Please do not complete this mail packet until you receive our instructions.  Thank you!</p>

Upvotes: 0

Views: 1116

Answers (3)

rihab bettaieb
rihab bettaieb

Reputation: 1

I recommend you to put the text and the image in a table, in the same row, the image would be in the first column, while the text goes to the second column in the first row . here's the code

<table>
   <tr>
     <td><img src="../../images/stop.jpg" style="width:40px;height:40px;"/></td>
     <td><p>Your transaction requires special instructions from our office.  Please complete this Special Handling form, and we will contact you within three business days to provide assistance.  Please do not complete this mail packet until you receive our instructions.  Thank you!</p></td>
   </tr>
</table>

Upvotes: -1

Sachin Kadam
Sachin Kadam

Reputation: 93

Please check below code.

p img{float:left;margin:0 10px 10px 10px}

http://jsfiddle.net/sobxf85t/

Upvotes: 1

j08691
j08691

Reputation: 208032

I'd float the image to the left with a little CSS, which allows the text to float up next to it:

img {
  float: left;
}
<p>
  <img src="../../images/stop.jpg" style="width:40px;height:40px;">Your transaction requires special instructions from our office. Please complete this Special Handling form, and we will contact you within three business days to provide assistance. Please do not complete this mail packet until you receive our instructions.
  Thank you!</p>

Upvotes: 3

Related Questions