CSS

Screen shot 2012-06-20 at 2.50.12 PM

How To Wrap Text Around Images

June 20, 2012
72 Views


Okay so today someone asked me how to get text to wrap around an image on a website. This is yet another very common feature that can be used on almost every single website, so get ready to learn this easy trick!

Let’s say we have an image. The code would look like

<img src="this_awesome_image.jpg" alt="" />

First we ad a class to the image so that we can style it from our CSS file. I’m going to call this class “about_image”, it’s a good idea to create two classes, one “alignleft” and one “alignright” so that you can apply them to any elements that you wish on your site. I’ll reference that later.

Now our html looks like

<img src="this_awesome_image.jpg" alt="" class="about_image" />

Opening up your CSS file (style.css normally, could be something else though) we want to declare our new class, and define some style properties. Specifically, the float: property, and margin: property.

.about_image {
float: right;
margin: 10px;
}

You can either float the image to the right, or to the left. Which ever you prefer. They both behave the same.

You want to give your image a margin so that it doesn’t push up against your text, and that theres a clear separation from the surrounding elements.

BOSS TIP :
Setting up 2 classes that allow you to float any element to the left or right is insanely worth while.

.align_right { float: right; }
.align_left { float: left; }

Now all you have to do is apply those classes to any and every element on your website, and things will start floating all over!

In his last 10 years as a freelance Web Designer / Developer, Andrew Kaser has achieved further than just a “higher understanding of creating symantec code while keeping resources low.” Kaser looks to help promote better web standards in order to build a flourished industry that exceeds current development practices.

5 Comments

  1. I followed the instructions in your video and it didn’t work. AAAHH!!

    • Hey Janet, Could you provide a little more details about your situation? You are probably very close to getting it!

  2. hi! my images align on the left, but my text is under each photo instead of to the right. i’ve tried everything and i can’t figure out what i’m doing wrong? help, please!

  3. Hi, looks like an old post, but I will respond anyway. Your cell padding is probably set too big. Be it in the css or table head, or both. I have had similar issues today and have just been playing around with the attributes. You are more than welcome to check my site out if you wish. While you cannot view the source on the main page, you can on my bio’s page. Also, you can download a copy of my main page in text format, as my first contribution to the net scripting world. It’s all validated.

  4. I think the float will work with the text which is after the image, what I mean you should be sure that the text which you want make it around the image is after the image not before.

    Thanks

Leave A Comment