1. Home
  2. Computing & Technology
  3. Web Design / HTML

Free Web Template: Wrap Text Around an Image Layout

By , About.com Guide

XHTML CSS Wrap Text Around an Image Layout

XHTML CSS Wrap Text Around an Image Layout

Jennifer Kyrnin
About this Web Template:

Wrapping text around an image is a common effect in print publications, but it was impossible to do on the Web - until CSS. This template wraps text around a simple ball shape, but you can get as creative as you want with the shape you'll be wrapping.

See The Template
See the template with borders

Works in Browsers:

Windows

  • Firefox and Mozilla 1
  • Internet Explorer 5 and 6
  • Opera 8.5 and 9

Macintosh

  • Firefox and Mozilla 1
  • Internet Explorer 5
  • Netscape 7
  • Safari 1
Special Notes:

Internet Explorer works a bit differently than other more compliant browsers, so you'll need to test it in both IE and Mozilla or Safari before you post your page. While it doesn't work in Netscape 4, if your image is light enough, it does degrade gracefully, with the image acting as a background to your text.

Details:
  • this layout uses a background image to be wrapped around
  • all content that is wrapped is in the same div as the image background
  • empty div or span elements are then used to force the text over to where you want it
  • all the empty divs are 20px tall, you can make them smaller to get more granular effect, but this is where IE has trouble
  • the easiest way to see the spacers is to add a border to them temporarily as you're testing
To Use the Free Web Template:
  1. Copy the CSS into a document named styles.css
  2. Copy the HTML into a file in the same directory
  3. Copy the image into the same directory, or create your own image
  4. Change the text to your content
  5. Publish the documents
The Image:

I created a ball shape with Photoshop using a radial gradient from pale cream to dark red.

The Web Site Template Data:
More Web Site Templates:
Terms of Use:

You are free to use any of the free Web templates here for personal or commercial designs, either in print or on the Web, excluding items for resale. You may not give away, sell, or redistribute the files in any way. Do not post these files on any another Web site, electronically distribute them, or include them in any package for distribution. If you find these files useful, please include a credit line or a link back to this site [http://webdesign.about.com/]. Terms of use last modified 8/29/2004.

Explore Web Design / HTML
About.com Special Features

Holiday Central

What to eat, where to go, fun things to do and how to save money on the perfect gifts. More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

  1. Home
  2. Computing & Technology
  3. Web Design / HTML
  4. Web Design
  5. Principles of Web Design
  6. Layout
  7. Web Site Templates
  8. Free Web Templates
  9. Free Web Template: Wrap Text Around an Image Layout>

©2009 About.com, a part of The New York Times Company.

All rights reserved.