CSS – Make Text Wrap Around Image Using Float

fyd — Wed, 05 Mar 2008 12:39:09 +0000

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.

<span class="text">CSS Image Wrap</span>

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.

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

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.

freeyourdesign » css images

CSS – Make Text Wrap Around Image Using Float

The HTML

The CSS File

No Float Example

Float Left Example

Float Right Example