Aligning text under an image

HTML & CSS
1

Hello,

I have the following code in one of my pages:


<img src="/images/picture.jpg align="left" />
<br>bla1 bla1 bla1
<br>bla2 bla2 bla2
<p>bla3 bla3 bla3

The text “bla1 bla1 bla1” and “bla2 bla2 bla2” are aligned to the right of the image, just like I want it to be. But the text “bla3 bla3 bla3” is also aligned to the right of the image. But I want the text “bla3 bla3 bla3” to appear under the image. Any one know how I can do this?

2

Either remove the align="left" attribute from the image or add a style="clear:left" attribute to the <p> tag.

My recommendation would be to use CSS for all presentational matters. That’s not what HTML or XHTML are for.

3

Here’s a method:

<style>
#imagewithcaption {
float:left;
width: 178px;
text-align:center;
}
</style>

<p id=imagewithcaption><img src="/images/picture.jpg" width="178" height="103" />bla3 bla3 bla3</p>
<p>bla1 bla1 bla1</p>
<p>bla2 bla2 bla2</p>
4

Thanks! It works!