/* Images take up a maximum amount of real-estate, and float on the right side
 * of the screen */
.picstep img {
   float: right;
   padding-bottom: .5ex;
   padding-left: 2em;
   max-width: 456px;
}

/* Subsequent elements (such as list elements) should clear the float so the
 * image floats in a proper location */
.picstep > * {
   clear: right;
   padding-bottom: .5ex;
}

/* But... don't clear the float for any item that immediately follows the 
 * image (as a sibling) */
.picstep > img + * {
   clear: none;
}

/* Clear headings, and any direct sibling of picstep following picstep 
 * Note: Including the headers is probably redundant... */
h1, h2, h3, h4, .picstep + * {
   clear: right;
}