promotion

Monday, December 5, 2011

How To Wrap Text Around an Image

There are times when you want an image on your post to fill the screen, or place in the middle of text with writing above and below it, but most of the times you want your image to place on one side or the other of the text and have the text flow or wrap around the image. While the styles above will float the image left and right, you may want to add more design elements to your image.
There are two ways you can wrap text around images. One is using CSS and the other one is using HTML. I recommend using CSS, as it's more standards based.
First add your image to your webpage.
1. Using CSS
Add style attribute to your image tag:
<img src="IMAGE URL" alt="alternate text" width="width" height="height" style="" />
You'll use the float style property to move your image to one side or the other. The tricky part is remembering that you're floating your image, not the text. So if you want to wrap the text on the left side of the image, you need to float that image to the right, and vice versa. So add the float property to your image:
<img src="IMAGE URL" alt="alternate text" width="width" height="height" style="float:left" />
Ex:
<div style="width:500px; border:1px solid red; font-size:13px;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYJ3pDzauZ8Uq8FgLG3Hf1ZFiBmbBBGYvTkq_xsse1AKjVuM2zEDFBEHjtkUax4oyg7RuZacVAc2a6lBYiFBwRJn4viBDPoYvyQLs1Czk2hkfGs_VWGBzpNr8z0B0y4KxT_TqZytlcrXo/s200/image.png" style="float:right"/>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

Output:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
2. Using HTML
Add the align attribute to your image tag:
<img src="IMAGE URL" alt="alternate text" width="width" height="height" align="" />
To align image right:
<img src="IMAGE URL" alt="alternate text" width="width" height="height" align="right"/>

No comments:

Post a Comment