Subscribe to Tutorial Feed

Flash and PHP Bible

The Flash and PHP Bible has been released! The book can be found on Amazon or wherever fine books are sold in your area.

The Flash and PHP Bible has a forum for quick support.

Scriptplayground » tutorials » css » CSS Runaround

CSS Runaround

Use CSS to "flow" text around an image.

Here is an example showing how this effect works

This really cool experiment is brought to you by pneal

Here is the sample HTML we will use

<div id="container">
    <div id="run1" class="runaround"></div>
    <div id="run2" class="runaround"></div>
    <div id="run3" class="runaround"></div>
    <div id="run4" class="runaround"></div>
    <div id="run5" class="runaround"></div>
    <div id="run6" class="runaround"></div>
    <div id="run7" class="runaround"></div>
    <div id="run8" class="runaround"></div>
    <div id="run9" class="runaround"></div>
    <div id="run10" class="runaround"></div>
    <div id="run11" class="runaround"></div>
    <div id="run12" class="runaround"></div>
    <div id="run13" class="runaround"></div>
    <div id="run14" class="runaround"></div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
        Curabitur bibendum nulla sed lorem. Vivamus interdum elementum eros. 
        Aliquam quam sapien, egestas in, molestie quis, ullamcorper in, nibh. 
        In hac habitasse platea dictumst. Vestibulum scelerisque adipiscing nulla. 
        Curabitur egestas, purus a dignissim tristique, purus massa eleifend metus.
        Sed nislz Aliquam erat volutpat. Vivamus nec dui in enim tempus elementum...
    </p>
</div>

Next up is the CSS, here is the body style

body {
  background-color: #FFFFFF; /* set the background color */
  font-family: Arial, Helvetica, sans-serif; /* The specified fonts */
  font-size: 0.9em; /* set the font size to 9/10 the size of the default
  color: #000000; /* text has a color black */
  margin: 50px; /* apply a 50px margin to the body */
}

The container div

#container {
  width: 70%; /* Set the width to 70% of the entire page */
  margin: auto; /* center the content */
  background: url('pintail.jpg') no-repeat top left; /* apply the background image */
}

The div code for the "wrapping" effect

/* All basically the same, set a width and height */
#run1 {width: 170px; height: 15px;}
#run2 {width: 190px; height: 15px;}
#run3 {width: 200px; height: 15px;}
#run4 {width: 205px; height: 15px;}
#run5 {width: 210px; height: 15px;}
#run6 {width: 220px; height: 15px;}
#run7 {width: 235px; height: 15px;}
#run8 {width: 265px; height: 15px;}
#run9 {width: 290px; height: 15px;}
#run10 {width: 310px; height: 15px;}
#run11 {width: 310px; height: 15px;}
#run12 {width: 125px; height: 15px;}
#run13 {width: 125px; height: 15px;}
#run14 {width: 125px; height: 35px;}

"float" or place the text to the left and make sure it doesn't overlap.

.runaround {
  float: left;
  clear: left;
}

Set the line height, purely for style purposes.

p {
  line-height: 1em;
}

That is all there is to this effect, thanks again to pneal for letting us use this wonderful experiment

If you have any questions post them :)

Follow Scriptplayground on Twitter (@scriptplay)

Comments: CSS Runaround

 asgeir  Wed Jan 11, 2006 11:19 pm  
this is the most hilarious solution i have ever seen.
 Willie  Sun Jul 16, 2006 7:00 am  
to much work in my opinion, must be an easier way, like using php to calculate where to start new lines.
 Promovare web site si pub  Thu May 22, 2008 8:20 am  
It's a better mettod to do that with css only, if you use this mettod you work to much and the page is loading more
Add a comment
The ability to add new comments has been disabled in this archived version.

Loading
Main | Tutorials | Articles