Hanging text with CSS

If we apply a text-indent to a paragraph, it will indent the first line of the paragraph as follows:

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

However, we can apply a negative amount to the indent which results in the first line being "outdented" as follows:

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

If you place this code in the normal flow of your page, there is every likelihood that the "outdented" portion will drop off the left of the page or disappear under a left hand menu as you can see above. In order to prevent this, you need to put the paragraph in its own div with plenty of padding as below. How much padding will depend on how deep your "outdent" is.

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

Here's the code

If you copy and paste this make sure you paste it as plain text or you will get all the formatting.

CSS
.textholder {padding:0 0 0 40px;}
.hanging {color:#ffcc99; text-indent: -40px;}
.bold {font-weight:bold;}

HTML
<p>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 </p>
<div class="textholder">
<p class="hanging"><span class="bold">Lorem:</span> 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</p>
</div>