Floated Blockquote

Apparently I’ve forgotten if there’s a trick to this.


I need to float a blockquote, but the blockquote needs to start in the middle of a paragraph.

I ended up using a vertical spacer. I feel dirty. :xeye:

Is there a better solution?

<!-- a floated, zero-width vertical spacer  -->
<div style="float: left; height: 35px"></div>

<!-- this blockquote pushed down by vertical spacer -->
<blockquote style="float: left; clear: left; width: 150px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fermentum interdum accumsan. Sed quam tellus.</blockquote>

<!-- this paragraph wraps around both the spacer and the blockquote -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sodales blandit dui non semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas ullamcorper vehicula urna, sollicitudin pellentesque ligula mattis ut. Praesent ullamcorper tincidunt nunc, sed pharetra augue ullamcorper dictum. Nulla ac risus leo. Nam elementum euismod tellus, in iaculis sapien facilisis eget. Mauris eget urna a lorem pellentesque lacinia. Phasellus sit amet nunc mattis massa bibendum placerat pulvinar faucibus lacus. Pellentesque cursus tortor in augue viverra et lobortis leo accumsan. Praesent et nibh ipsum. Duis ac magna lectus.</p>

Very clever, actually. Paul refers to this type of spacer as a “sandbag” and demonstrated it in a puzzle in which two columns of text flow around a central image. I didn’t know it would work without a width of 1px. Interesting.