Question

I have this image link:

<p class="alignright">
    <a target="_blank" href="...">
        <img width="230" height="158" align="right" style="margin-right: 30px;  margin-top: 20px;" src="some_source" >
    </a>
    text should go here
</p>

The alignright class looks like that:

.alignright {
    float: right;
    margin: 4px 0 1px 10px;
}

Now I tried several things to place text below the above image link (I tried using a < br > and image captions for example), but everything failed. The text is either too far on the left, or its not even below the image link.

Any ideas how to get the text below the image link?

Thanks!

Answer 1

You mean that you want the text to be aligned to the left edge of the image link?

This means that you have to put both elements into one container and assign the float:left property to this one:

I guess that this is the “” I can see in your sample.
Did you make sure, that the width of the p-Element is the same as of the image link?

Otherwise the text would be aligned to the p-borders wherever they are on your page.

Shrink the size of the p-Element or put everything into an extra container:

<div style="float:right; width:#IMAGE_LINK_WIDTH#; text-align:left;">
  <a href="">IMAGE_LINK</a>
  <!-- A <br /> might be placed here -->
  Text
</div>