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 :)