How to Wrap Text Around an Image
I am often asked how to wrap text around an image or, simply put, how to place the image to the left or right of your text. You can see an example to the left of this paragraph.
You can use this little snippet of code just about anywhere. It’s perfect for adding images to your blog post or adding Adsense or banners into your text.
Below is the generic code you can use, just copy and paste. I’ll also give you a few examples with changes to the code for different layouts.
Generic Code
——————————————————————-
Then type your text here.
——————————————————————-
If you want to place the image to the right of your text, change the “float:left” to “float:right”.
float:right;
——————————————————————
——————————————————————
You can change the distance between the text and the image by changing the margins. You’ll need to know the order of the margins, so here’s a tip…
margin: 0px 10px 0px 0px;Think of a clock…1st is top, 2nd is right, 3rd is bottom and 4th is left.
Play with the 4 different margins to get your text where you think it looks best.
Examples:
margin: 0px 200px 0px 0px;
Notice how close the image is now to the text…
margin: 0px 20px 0px 0px;
Notice how far the image is now from the text…
In the above examples you see how you can adjust the right margin as close or as far from the text as you wish simply by changing the 2nd (right) margin.
Now, let’s try it with the image to the left of the text.
margin: 0px 200px 0px 0px;
Notice how far the image is now to the text…
margin: 0px 20px 0px 0px;
Notice how close the image is now to the text…
Adjusting the “other” margins…
Top Margin
——————————————————————
——————————————————————
This is just some text to show you how it looks when the 1st or top margin is changed from 0px to 50px…..notice how the image is way below the start of our text.
dfjsdkflasdjfkasldfjkasdlfjkasldjfas;ldfkjas;ldkf
asldkfjaskdlfjas
asdlkfjaksdlfjasldkfj
dfjsdkflasdjfkasldfjkasdlfjkasldjfas;ldfkjas;ldkf
asldkfjaskdlfjas
asdlkfjaksdlfjasldkfj
dfjsdkflasdjfkasldfjkasdlfjkasldjfas;ldfkjas;ldkf
asldkfjaskdlfjas
asdlkfjaksdlfjasldkfj
Bottom Margin
——————————————————————
——————————————————————
This is just some text to show you how it looks when the 3rd or bottom margin is changed from 0px to 50px…..notice how far the text falls below the image when it wraps around the image.
dfjsdkflasdjfkasldfjkasdlfjkasldjfas;ldfkjas;ldkf
asldkfjaskdlfjas
asdlkfjaksdlfjasldkfj
dfjsdkflasdjfkasldfjkasdlfjkasldjfas;ldfkjas;ldkf
asldkfjaskdlfjas
asdlkfjaksdlfjasldkfj
dfjsdkflasdjfkasldfjkasdlfjkasldjfas;ldfkjas;ldkf
asldkfjaskdlfjas
asdlkfjaksdlfjasldkfj
These are just a few examples of how you can use this snippet of code to change the layout of your page, now you can copy and paste the generic code and play with it.
Toresa:)
ps. Was this helpful? Let me know by leaving a comment below…
