Do you want to wrap text around an image?
When using images in your post, do you sometimes get upset with where the text around the image goes? Here is a way to get the text to wrap the image...either to the left or the right. It is simple enough. All you need to do is put a little CSS in your template, then tell the image where to go.
So, basically it is a two step process. But, once you get the CSS code placed in the CSS style sheet, you only have to tell the image where to go from then on when posting images. If you notice, I have my flowers to the left and the gingerbread boys to the right, and the text wraps around them.
Here are the steps.
Step 1: Locate the CSS style sheet and paste this code (I put mine under the post section):
/*Wrap text around imageStep 2:This is what your image tag will be similar to:
----------------------------------------------- */
.left {
float: left;
margin: 6px;
}
.right {
float: right;
margin: 6px;
}
<img src="http://farm4.static.flickr.com/3599/3515377006_db67e698de_m.jpg" />Add class="left" or class="right" to that image tag. It will look like this:
<img src="http://farm4.static.flickr.com/3599/3515377006_db67e698de_m.jpg" class="right" />Since I added class="right" to that image tag, the image will float to the right and the text will wrap on the left.
One more thing. When using this method to post an image, you will have to use the Edit HTML tab in the posting window...not the Compose tab.
EDIT: Thanks to an email from David Cosier/Fear Healing, I discovered a potential error in this code...it has been corrected. I left out the ----------------------------------------------- */ part of /*Wrap text around image. It really matters!
238 Comments:
I have discovered that I can just move the picture to where in the paragraph I want it to appear, and the text will wrap around it. That's in the draft blogger, with the image selected, so those corner squares show. But thanx for this.
Hi,
Thanks for the wonderful tutorials on this blog. I actually had a small request. Could you please tell me, is it possible to make a template, such that there are three columns on the front page, labels and archives, but only two columns on the content page? Also is it possible that the content can take up the unused space? Will be waiting for your reply and any suggestions u can make.
Please note, I am not very good with HTML or CSS, though I have learnt most of the stuff by trial and error. Thanks again.
@whiteguardian, I don't know the answer to the first question, but for the second question, you can make your content fluid. I have a couple of posts that help with that. Click on 'fluid' in the label cloud.
Thanks for the Quick reply. However that doesn't help me much. :(
Just a thought. I was thinking whether we could use a two column css file for the post pages and a three column one for all the other pages. Do you think this might be possible with the conditional tag?
Thanks allot I will defiantly use this in my blog!
Please post more of these little tutorials!
Ugg boots help
simple, but very usefull for me!
thanks..
I just across yout tutorial to wrap text around an image, I was having problems with wrapping the text around images and the text always broke. This tutorial has been useful and I just can't believe how simple it was. Thanks for sharing this!
Hi,
This is a bit off topic. I have been trying to implement a two layer css tab menu, without Javascript, on one of my blogger blogs. I found one very good example --> http://labs.silverorange.com/images/tabsupdate/about.html. But somehow am unable to implement it.Could you please have a look and help me on how to implement it on blogger?
I know that i will have to use different blogs to create a web site effect. But even though i could try it on firefox, it does not show ell on IE8 in blogger.
Thanks.
I would like to add this option as a permanent option with my CSS instead of editing the CSS each time, Thanks for the tutorial.
Awesome stuff. Came to your blog from my friend's site and wasn't expecting to find something actually useful. was expecting to just find something random and comment for the dofollow love :p being honest :)
wanted to use something like this in my about page but landed up putting the image below. didn't realise you could just float it. been using float="right" but seems like there are a few ways to initialise these things (come from java background so weird that you can use so many methods)
respect
alex
That's pretty neat! I have always wondered how to do that, but my lack of technical expertise prohibited me from doing so. Now maybe I can try it, thanks! Regards!
thank u much much i used it, and it helped me with positioning of keywords as well
This is much easier than I assumed it would be. I always hated that I couldn't figure out how to do this (or how to word a search on how to do this in Google...)
Or alternatively you could just download Writer from here http://downloads.live.com and choose Writer. Once on your computer, its easy to set it up with Blogger,Wordpress etc,it will pull down all your settings,let you place pictures whereever you want with text wrapping, let you have different borders around your pics and its so easy to do! Save to draft and then publish when you are happy!
Easy peasy I wouldn't blog without it!
Woah that's pretty simple, thanks. I've been always using some kind of plugin or asking my brother to help me. Never thought it might be that easy.
thanks for your little tutorial. It is very useful to me. I do not know if, with css, you can align an image to the middle of a paragraph, maybe you can try with several divs
My wife and I are new to the blog scene. We do have a blog on blogspot, and have found your blog to be very informative. there's a lot to read here. Thanks for taking the time to share your knowhow.
Doesnt wordpress and blogspot do this automatically? Why do we have to edit the css file for this anyway?
I like enclosing my floating images inside divs, do that way I can show a little border with padding, it makes it look better...
Great article on html! For more details on how to optimize you blog and get it perfect, visit SEO Toolkit!
nice articles....thanks for sharing, it's very helpfull for me
hey thats slick, thanks.
Great blog!
I putted your banner on mine "Parcerias", if you wanna exchange links that'd be great.
Keep up the great job, really nice to surf here. I'll come back.
Great blog. Thank you for the advice.
Masterplans
Wow! I love your blog!
Been looking at the stuff in your blog, and it should help me build mine that I just started, thanks. Dentist Maple Grove MN Blog I'm Building. It should look better in a few weeks!
Your blog post is easy, clean & short descriptive. right way to write content on blogs.
You really have a wonderful site and I enjoy coming here and learning some new tricks to try out. You make things so easy for us newbies!!
Very interesting. Simple and I'll try it.
Thanks
i finally find the way here. thanks for your information, i will try it soon.
I thought that blogspot allowed this as a default. Good to know - I've been considering a switch from WP.
good info. definitely help others
i m going to wrap some important info using this method
It's a very handy tip, easy, but makes such a pleasant aesthetic result.
To those who asked, blogspot is a pain, and costs a lot of wasted time and time is money as they say. It is doable on BS by editing the code, but I recomment you use another platform as BS is really designed for basic user needs. Advanced users should look elsewhere.
Thanks, it works great. css is pretty hard to understand IMO
Thanks for the info.
Great article.Well written!Thanks
HELLO THANKS FOR THIS WONDERFUL POSTING ABOUT THE WORD WRAP TRICK AROUND THE IMAGE!IT'S SO SIMPLE!WANT SOME MORE TRICKS!THANKS!
Great Concise explanation - thanks a lot!
VRT
Hi Annie!
I have a problem with my template.
It doesn't have "Newer Post" | "Home" | "Older" Post link.
Could you help me.
My blog: http://toiyeugoogle.blogspot.com
Thanks for the post! I can now put the images wherever I want!! It's cool!
Excellent work, I've come up with many ways to wrap text around images, though this was my final outcome - a suggestion though, try spacing (using margins) by 6px instead, this makes the text/content a lot more readable...
Thanks for this! I always have this problem, really interesting read.
a suggestion though, try spacing (using margins) by 6px instead, this makes the text/content a lot more readable..
Jane
It's very nice post. Thanks
oh this is really great post thanks for sharing... :)
industrial strength
Wrapping text around 2 sides of an image is really easy. But when I want to wrap text around 3 sides of an image, I have to do it thru trial and error to see exactly where in the paragraph to insert the image. I wonder if there is method or a plugin where you just input the image's location and it gets inserted in the paragraph with at least 3 sides wrapped with text.
it's nice post, i'll try it thanks for the fresh articel
Thanks, that was very helpfull! I always have this problem.
That was very helpful! It's hard for a lot of people to wrap text.
I had no idea you could do this! Thanks for posting this simple yet extraordinary tutorial.
I will try the code, thanks for the tutorial.
You did not mention if this script or tag is for wordpress or blogger. Will it work on the same platform?
Finally! When I post on my blog, I've used the graphic interface, with nice clear buttons it was easy. Never got around to figuring out these "tags". But now, I just might :)
Hi,
Awesome post, i liked it very much.
The techniquie you taught us is quite usefull.
Hey I always wanted to know how to do it. I saw it on another blog who added a Google image and wrote around it. Thank you very much.
Really appreciated.
Mike G
The Make Money Online Guy!
as I use wordpress and instant free theme, so i never edit the html code. I don't no if wrap text will affect our SEO or not. Everything is done by wordpress engine and plugins
Thanks for the tips, definitely helps people who are not that well versed in HTML.
Thanks for the straight-forward tutorial.
It was to the point, and easy... I've came across a lot of crap looking for this tutorial.
Have a great one
Thanks a lot for your help! I was searching the web to solve some issues that I have when I found this blog
If I could understand this everyone can...
Very Handy, Little tips like this make it worth stopping by.
Thanks
it's a great post, can use it in many ways in the bloggging. I saw something like caption in latest wordpress looks the same
simple, but this will ease
Simply fantastic And very usefull
Thanks for the tutorial.
this will help me in the future.
Thought I am not really Good is CSS coding but
still I'll try to post this code.
Now that’s easy, thanks for the tips.
Cool! Thanks I would love to apply this script on my blog, Thanks.
This is a great piece of code. useful indeed.!
Oh.. I was looking for this tips, but when I am not needing anymore. I am find it. Thanks.
allroundus
Nice post. I've been looking for this... Thanks.
Btw care for link exchange ?
Pojok Santai
I just made a css code but i cant post it.
Dave
fitness center columbia mo
Thanks Annie -This is just what
I was looking for to improve my site about baby gender predictors
Very nice tutorial. It helped me a lot. Thanks!
That is much cooler than just simply insert the image anchored and centered. Thanks!
Cool stuff. I use this on my WP blogs but I was going to do it on my other site and was going to figure out how to do it. Thanks!
thx guy's
I just fluked getting to this site and that text and image has been doing my head in.But thanks to you guy's i finally got it sorted phew! thx guy's
Wonderful article! I have always had problems with arranging text around images. Not any more!
Is this work on all major browsers?
Hey thanks for this. I have just started a website and was trying to figure out how to get the text wrapped round the image like that.
Great help
Cheers
I've been trying to figure out how to do that and this worked like a charm, thanks!
Thanks for sharing! This was really helpful
Tried it on my site.
Worked like a charm!
Thank you.
FYI: I found you on a google search for "wrapping text around an image"-2nd page
a simple topic described in a beautiful way. nice
Really thanks for sharing and it works :)
Damn and I've been using quotation marks to make everything look neat. I thought that the label cloud is just having problems with some of the plugins so I uninstalled it. Guess there is a way to get it to work after all. Thanks.
simple, but very usefull for me!
thanks..
Very nice tutorial for such common HTML coding issue. Also if you have a blog I recommend to download Wordpress. Pretty good and easy to use.
is this working for all the web browser or just certain ones.
So, that's how you flow text around images! I've been trying to do that for ages. Fantastic! Thanks for the pro tip!
A good logo is essential to strong branding. I've been a graphic designer for a long time and a blogger and having a great header/logo that grabs attention is the best first impression you can make.
"When using images in your post, do you sometimes get upset with where the text around the image goes?"
As a blogger, I'm so frustrated about the way the text wraps around the image. Thank heavens for your post! I'll give this a shot.
Is there not an easier way?
zitcure
"When using images in your post, do you sometimes get upset with where the text around the image goes?"
Thanks for this easy and straight forward text wrap guide. It will definitely help in making my blog have the right balance of pictures to guide/support the text.
Great advice, I can see I need to improve my understanding of HTML.
"It is simple enough. All you need to do is put a little CSS in your template, then tell the image where to go."
thanks for this CSS guide. It is very easy to understand and apply. I'm hoping to apply more text wrapping to better complement my photo blog.
This is exactly what I have been wanting to do with my blog images but am unable to do so since am not a techie, good thing I found your blog post, thanks!
Good article on HTML page designs.. thanks for the post!
Payday Loans
"one more thing. When using this method to post an image, you will have to use the edit HTML tab in the posting window...not the Compose tab."
Thanks for the thorough details. I was confused for some time how to go about this but your entry cleared it up
Pretty easy I guess there's no reason for me to put it off anymore. I think I'll give it a try right now. Thanks.
Nice tip. I've never seen text wrapped around an image... But I think that it would look awesome.
Wow.. i'm extremely impressed with not just this article but your whole website and how many people actually visit it to get informatoin on their blogging.
I'm an experienced blogger and have some very high page rank and high searched blogs, but of course I like looking at my competition.
Thanks again,
Blake
I usually add style="align : left" into my img tag. :) Quite simple. ;)
Very nice! Sometimes editing CSS can be a bit confusing.
Just wondering, will this work on mobile devices like iPhone as well. Lot of my visitors looking for ways to make free calls use iPhones or Blackberry's. I am curious if this setting will properly work on those devices as well. If anybody has tried it, please let me know.
Great post! I usually just align left or right to wrap the text around, but your way is definitely neater and solves more problems, thanks.
Thank You for share with us. I saw you have so many tips here, really usefull and straight to the point, I have several blogspot blog that need to adjust, I'll bookmark your site on my browser.
Thank you for this guide! Your manner of explaining is so clear, you were the fourth guide I read and only yours got the job done. Thank you!!!
This is good for me, I had difficulty in my earlier post images but I try to find time using photo editor. Do you know any online photo editor that allows you to combine two images and become as one image file?
thanks so much for this!.. always been looking to do this.! cheers
I love it. It can sometimes be pretty helpful. Especialy when the theme has some weird restrictions as to putting in pics.
hi there really a great post which can be used in many in the blogging
thanks for info:)
I don't have to use this right now since i manage my site through register.com and everything is 'click, copy and paste, etc.' I do appreciate you sharing, i've learned a lot about website design and seo stuff from bloggers just like you.
Thanks for the post and the sum up of the CSS commands, will come in handy.
I did not know it can be done so easily. Excellent trick.Thanks for sharing this useful information.
I am a complete ignorant when it comes to techie stuff, but I will give this a shot, seems like its easy the way you explained it. Thanks mate!
Thanks, this was really helpful :) I was always such a ditz when it comes to these things, now I know what to do from now on.
Love your work!
thanks for the tips, now i can wrap my image without any problems thanks to you.
"When using images in your post, do you sometimes get upset with where the text around the image goes? Here is a way."
Wrapping text around an image can make your post attractive. The instruction you provide is clear and easy to understand.
Nice Info Dude..!!
Thank you for the clear and easy to follow tutorial. I will try to apply it for my blogs.
Will drop by later.
very useful tips, I've been looking for this for sometimes, thanks.
THANK YOU soo much for this. My head was going crazy trying to figure this out for my blog. Thanks alot!
Free International VOIP Calls WorldWide
Thank you. This is really convenient, as previously I have always commanded the mentioned technique in my img code and not in css. Def. worth using this technique. :)
OMG this is just so cute. got to apply is ASAP
Thanks for the share..
Its a good way to do CSS designs looking better
Web designers CSS
It was a very interesting post thanks for writing it!
Thank you for sharing the tip with us. I love putting images and this is a big help.
Perfect! I've been pulling my hair out trying to figure this out.
Thanks a ton!
Thanks a ton. I'm a newbiew and I have been trying to learn how to put a link on an image. Now I can really get a better response on my site.
California Car Insurance
thanks for sharing.
very helpful post indeed. Thanks a lot.
I appreciate you taking the time to educate us newer members of the blogosphere on how to make our websites look the way we intend to.
I am a bit of a noob but you make editing the CSS style sheet look relatively easy. Thanks.
Wonderful tut =)
Very useful code. Now I can wrap any text in my picture. Hope to post a new and useful CSS code. =)
Wow, thanks. This makes it quite simple to have an image as the centerpiece with a lot of text around.
Thank you for your guide! it help me, really.
Thank you for sharing the tip with us.
I don't get any problems in wordpress bu at times i miss some text. Thanks for the cascaded style.. Keep up with the good work..
Nice little trick for newbie bloggers who don't know about CSS.
DotA-Utilities
Hi Annie. Usually when I want text to wrap a round an image I just inline CSS inside the "img" code, like so ... <img alt="" style="margin: 8px 8px 0px 3px; float: right;" src="http://mydomain.co/image.gif" title="" width="133" height="154" />
Hi,
This is really useful information. I have often scratched my head at trying to get around this.
Thanks for the great advice:-)
Sweet. As a photographer, sometimes we spend hours and hours to get the right picture/image but don't want to spend the same amount of time to figure out CSS or HTML. I'm glad I found your site and its just been bookmarked!!!
Nice! I'll use it at my blog :D
Thank you for your guide! it help me, really.
Thank you for sharing the tip with us.try this site http://www.youdate.biz/ it give u best offers.
Thanks for sharing that one. I gonna try that one for inserting images in my site.
web design chennai
Thanks for sharing such a useful information for designing a website
Thanks for the share! I have been wonding on how to do this for a while on my blogs. I shared this on my free forum maker for people who were wondering how to do this also.
Thank you so much for this tip - it took me ages - and you can imagine how much longer it took my mother - to get our heads around wrap around and yet you have made it so simple! Superb! Well done.
Cool tip! Thanks for sharing.
Savings Advice
That just makes a site look so much more professional then otherwise.
Excellent. As a professional photographer, sometimes I spend hours and hours to get the right pictures but I'm not technical enough to figure out CSS and HTML. Great resource. Thanks!
I have been trying to implement a two layer css tab menu, without Javascript, on one of my blogger blogs. I found one very good example -->
Deaf school
It is interested to know about this CSS tutorial on which you can placed text around an image
I made the image very pleasant. Thank you for sharing that tutorial. That may help me for arranging my images.
Awesome stuff. Came to your blog from my friend's site. Previously I only knew how to use add the "align" tag to the img tags. Thanks for sharing.
hi thank you for sharing this post
i am always having a hard time putting images in my posts. i can't seem to align the spaces vertically and horizontally
this is very helpful
thanks!
This is an interesting topic that know about the CSS tutorial on which you can placed your document. Thank you.
Insertion of image in a tedious job but your simple code and explainations made it simple.
want to wrap text around an image? yeach this is what I've been looking for. Thanks for the information
Hey, thanks for sharing the code!
I haven't really tried doing text wrap on images thru codes. I was just lucky that I use sites that can do text wrap easily. :)
Thanks for sharing this trick blog.
Thanks for the tip, it it anoying to try and get the photo where you want.
Thanks for sharing this tip...Great post
This is an interesting topic about CSS. Thanks for shearing.
wow...what da great info...i like it...thank u..
seen on post
Text around image - this looks really uncommon. Thanks for sharing the trick.
Thanks for this useful article, I don't have expierence of HTML, haha ... :D
I have been doing this for a long time. What i am looking for is a script for the template so it will become automatic.
it anoying to try and get the photo where you want.
biotech
This is very useful code. Thanks for this.
Hello!
I did not know that it is basically a two step process. Insertion of image in a tedious job but your simple code and explainations made it simple, so thanks a lot for your work!!
Greetings
Andy
Wow! this is a cool tricks thanks a lot!:)
Thanks you for sharing the tip with us. I love putting images and this is a big help :D
I hate CSS for these very reasons. Thanks for the help on this one!
Love CSS too though!
Thanks. You saved my life!
Hi,
I was very pleased to find this site. I wanted to thank you for this great read!! I definitely enjoying every little bit of it and I have bookmarked it to check out new stuff you post.
PowerPoint Presentation Slides
Do you want to wrap text around an image? is helpfully, Thank you so much for such informative information & tricks
I don't like how the image has a big gap on the bottom and a small gap on the side on different browsers. Is there any way around this?
Wow...this was a really good article. interesting...., thanks for sharing the info, keep up the good work going....
Useful script that solved my problem to add images next to text on my website. All such advice!
Hey i was trying to wrap text around an image.Thanx for sharing this information.Hope to see more from your side.
This is a great little tutorial. Resources like this are fantastic for when you get stuck with bits of web design. Thank you for sharing.
Hey! I liked your article! it was something new! And now I would surely follow your advice! I think your blog is really informative and creative! It contains a lot of information helpful for custom essays. Keep up with it!
The article is simply great.Thanks for your work!
I've tried doing this but only on HTML...I insert the code (direction of the image= right, left or center)...anyways thanks for sharing how to do it using CSS..I've learned something different now.
Thank You, Thank you!
This has been driving me crazy! Trying to find the code to warp around my images! I really appreciate the help.
I definitely enjoyed every little bit of it. I have you bookmarked your site and grab your rss feed.
Hey Thanks a lot for sharing such a nice information,Really a very nice and detailed review on it, Thanks a lot once again. By the way for Free online Tutorials and interview questions check this link: <a href="http://webdaggers.blogspot.com > Free Tutorials </a>
Thanks for the posted code. Very helpful.
Helpful code but you need to make it a block really because anything other than an image will wrap to the end of sentences and stuff.
Ste
Hey i was trying to wrap text around an image.Thanx for sharing this information.Hope to see more from your side.
Thanks! Your blog is very easy to understand. I am new to CSS and html and appreciate blogs like yours.
Yes.A very nice blog here.I always love it to come back.Thanks for bringing such a joy.
Lisa
Excellent site. And excellent post.
I also had the same problem which you discuss on this article.thanks for sharing this information.
your post is so good.thanks for taking time to discus this topic.
Listings
Nice blog article and share, thanks. Keep update
Great site...
Thanks for the great information. it helped me
That is a nice way to give your blog posts a real professional look!