Floating Images

A question that I get often and frustrates many non-technical bloggers is how to wrap text around images. There are two different ways to do this. They both work, but the second example is seen as “proper” and standards-based.

In our example, we have a content area that serves as the body of the website. It is in this area, we’ll experiment.

A few things to be aware of as we tackle this topic. The CSS property, float, works well when used well. According to the spec, “an element can be declared to be outside the normal flow of elements and is then formatted as a block-level element”. In other words, there are some potential unintended consequences. If your content is short and does not vertically scale to the size of the image, the floated element will not push other content (such as your next entry) farther down the page. Only elements deemed to be “in the normal flow of elements” will be able to push other elements down the page to prevent the floated image from overlapping with other page elements.

And the image we will use, a picture from a Dave Matthew’s concert I attended last year:

<img src="http://www.technosailor.com/images/dmb1.jpg"
    style="height:113px; width:150px;" alt="Dave Matthew's Show" />

Problem:
If I simply drop this image into my HTML, you’ll notice that the paragraph text around it will push above and below the image creating an awkward bit of white to the sides of it. Not really what we want. (Example)

Solution 1
The first method for approaching this problem is through pure HTML. By using align="left" or align="right" in the image tag, the browser will render all the content around it. (example)

Solution 2
The preferred method of doing this is through CSS. It employs adding CSS rules float:left; or float:right; to the image. Though I’ve appplied these inline with the <img> tag, this can also be moved to the <style type="text/css"> grouping in the page head or to its own CSS file. Also note how I’ve added margin-right:5px; to add a little padding around the image. (example)

Usage:
Inline:
<img src="http://www.technosailor.com/images/dmb1.jpg" 
style="height:113px; width:150px; float:left; margin-right:5px;" 
alt="Dave Matthew's Show" />

or CSS rule:

.floatimageleft {
float:left;
margin-right:5px;
}
<img src="http://www.technosailor.com/images/dmb1.jpg" 
   class="floatimageleft" style="height:113px; width:150px;" 
   alt="Dave Matthew's Show" />

As a reference point, the images that I’m using to begin these entries is floated using the second method.

• 
• Stumble it!

About the Author: Aaron Brazell is the lead editor of Technosailor.com and a social media expert. His passion is to see companies and individuals use the internet and web technologies wisely and effectively to promote their brands and companies. He served as Director of Technology at b5media from 2005-2008 and is currently an independent consultant.