CSS – Make Text Wrap Around Image Using Float

Mar 05, 2008 | css | fyd

Using CSS we will add a class to the img tag so that our text will wrap nicely around our image. This can be done fairly quickly and can really make your content look better. I recommend adding these classes to every CSS file – or if you have a base CSS file that you always use put these in it.

The HTML

First, we are going to set up our HTML – I'm just using placeholder text and a random image. You can copy my text or search Google for placeholder text.

<html>

<head><title>CSS Image Wrap</title>
<link href="style.css" rel="stylesheet"
type="text/css"media="screen" />

</head>

<body>
<p>
<img src="http://freeyourdesign.com/images/flag1.gif"
alt="temp" class="left" />
Lorem "ipsum" dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p>

</body>

</html>

Notice the class="left" inside the img tag. That's what we will create in our CSS file.

The CSS File

Make a new .css file – you can just use Notepad and save as .css instead of .txt

Name it style.css

/*float left*/
.left
{
        float: left; /*left in our text*/
        margin: 3px; /*space around the image*/
}

/*float right*/
.right
{
         float: right; /*right in our text*/
         margin: 3px; /*space around the image*/
}

That's all we need for our css file. If you use class="left" in the img tag the image will be aligned to the left within the text and using class="right" will align the image to the right. Pretty easy and you'll use it all the time.

Download: (right-click save as)
The HTML
The CSS

No Float Example

temp Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.