title: How to shorten blockquote to wrap around floated div?
body: <p>I'm stumped on a css problem. I've put up a test page here: <a href="http://georgecrawford.com/test/" rel="nofollow noreferrer">http://georgecrawford.com/test/</a> for you to check.</p>
  
  <p>I have a left-floated <strong>sidebar</strong> div, and a main <strong>content</strong> div which follows it (and which should wrap around it). If the content is just paragraphs, there's no problem, as the text wraps nicely around the float. However, I  have some <code>blockquote</code>s in the content, and I'd like these to have a background-color and/or a border. The <em>text</em> in these is no problem, it wraps nicely around the <strong>sidebar</strong> of course. However, the <code>blockquote</code> itself spans the entire width of the <strong>content</strong> div, which means a border around it would run over the top of the <strong>sidebar</strong>.</p>
  
  <p>How can I ensure that <code>blockquote</code>s in the <strong>content</strong> div are shortened horizontally to be the same width as the text lines (the 'line boxes') within them? Paragraphs have the same behaviour, but I don't need a border around my paragraphs!</p>
  
  <p>Thanks for any help!</p>