extending image height

Question

I have an image defined as

 <td>
 <p>Text for para</p>
<img src="vertical_divider.png" align="right" style="padding: 15px; height: 100%;">
</td>

The image is a vertical divider which acts like a right boundary to the paragraph whose contents are editable , so it keeps changing in height.

How do I make sure that the vertical divider also keeps changing in height according to the entire paragraph.

Answer 1

Try set the image as background with repeat-y

td
{
    background-image:url(vertical_divider.png);
    background-repeat:repeat-y;
    background-position:right top;
}

Answer 2

Using css you can set it to a background image that will extend in the space. Or if you simply want a line you can do it without the image.

<td style="border-right: 1px solid black;">
 <p>Text for para</p>
</td>

Answer 3

May this divider work better as background paragraph.

<td>
  <p style="padding-right:15px;background:url("vertical_divider.png") repeat-y top right;outline:1px solid red;">
   Text for <br>para
  </p>
</td>

But if you need to this divider keep in a image tag to be clickable or whatever. You can use the float property(less compatible).

<td style="outline:1px solid red;">
  <img src="vertical_divider.png" style="display:block;float:right; height: 100%;">
  <p>Text for para</p>
</td>