Technosailor.com

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:

1
2
<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

or

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

or

to the image. Though I’ve appplied these inline with the

tag, this can also be moved to the

grouping in the page head or to its own CSS file. Also note how I’ve added

to add a little padding around the image. (example)

1
2
3
4
5
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:

1
2
3
4
5
6
7
.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.

Popularity: 1% [?]