Wrap text around an image with CSS

A few of the IMG Attributes from previous version of HTML have been deprecated in HTML5. One of the most-used was the image alignment attributes. You had quite a few to choose from:

Absbottom
Absmiddle
Bottom
Middle
Left
Right
Texttop
Top

So you could do this:

<IMG SRC="york_images/york_minster.jpg" ALIGN="Top">

What you were doing here was wrapping text around an image. You were not aligning an image independent of text. You were saying, "wrap the text to the top of the image".
In HTML5 text wrapping is done with CSS. Let's see how to get the following style:

As you can see, the image is on the right and the text flows around it. There is also space between the image and the text.
The first thing to do is to set up a STYLE in the HEAD section of the HTML. Add the highlighted code to your own HTML:

The style we've set up is called TextWrap. In between the two curly brackets we have this:

float: right;
margin: 10px;

The CSS property we need in order to move the image is called float. The float property can take three values: left, right and none. To get some space between the image and the text we can use the margin property. We've set it to 10 pixels. This will give you space around the entire image. If you only want space on specific sides of the image you can use these:

margin-left
margin-right
margin-top
margin-bottom

So we could have done this:

margin-left: 10px;
margin-bottom: 10px;

That would get us a 10 pixels margin on the left of the image and 10 pixels at the bottom.
To apply the style to the image, you need to add the CLASS attribute to the IMG tag:

<IMG SRC="york_images/york_minster_2.gif" CLASS="TextWrap">

The CLASS attribute doesn't have to go at the end. If you prefer, you can put it after the IMG tag:

<IMG CLASS="TextWrap" SRC="york_images/york_minster_2.gif" >

Just take note of where all the spaces are in the code above.
Amend your own IMG tag and add CLASS="TextWrap" to your own IMG code. Before you try it out, add a paragraph of text below the image:

<IMG class="TextWrap" SRC="york_images/york_minster_2.gif">
<P>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus rutrum interdum. Pellentesque lorem. Curabitur sit amet erat quis risus feugiat viverra.
</P>

You can, of course, use your own text, and not just the Lorem ipsum text. Make sure your IMG code is above the first P tag, however.
Save your work and view the results in your browser.
There is, however, a problem with the above code. Suppose we want a second paragraph of text with another image floated on the left. We want to do this:

Here, the second image is nicely aligned below and to the left of the first image. The text is in the right place, too.
To achieve this, you might think of adding a second style and then applying it to the second image. Like this:

In the second style, we've used float: left and added a 10 pixel margin as before. In the second IMG tag, we've used the new TextWrapLeft class.
However, saving the work and refreshing gives you this in the browser:

In this version, the second image starts two thirds of the way down the first image. The text doesn't flow as we want it, as well.
The way to correct this is to use a CSS property called clear. This clears any floating elements and gets you back to the normal, default flow for browsers. The clear property can take four values: left, right, both, none. Because our first image was floated to the right, we want to clear to the right. We can add this to the second style:

If our first image had been on the left, we would have used clear: left.

In the lext lesson, you'll learn about adding borders to your images with CSS.

Posted in: Tips,Trick,Tutorial,Web Design,Web Design 4 (Dealing with Images)