How To Wrap Text Around Images

Screen shot 2012-06-20 at 2.50.12 PM

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.

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!