How to shorten blockquote to wrap around floated div?

Question

I'm stumped on a css problem. I've put up a test page here: http://georgecrawford.com/test/ for you to check.

I have a left-floated sidebar div, and a main content 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 blockquotes in the content, and I'd like these to have a background-color and/or a border. The text in these is no problem, it wraps nicely around the sidebar of course. However, the blockquote itself spans the entire width of the content div, which means a border around it would run over the top of the sidebar.

How can I ensure that blockquotes in the content 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!

Thanks for any help!

Answer 1

I've stumbled upon a potential fix for this problem.

If I set all blockquotes with the CSS property overflow: auto, it makes them reduce to the desired width when they'd otherwise overlap the floated sidebar. I've updated the demo at http://georgecrawford.com/test/ so you can see the difference. It's perfect in Safari/OS X, but I haven't yet tested in other browsers.

Any comments? Does this solution have any drawbacks? Many thanks again for your help.

Answer 2

In IE 9 the "overflow: auto" corrects blockquote underlay or overlay of a div floating to one side, however the overflow correction does not allow standard blockquote indentations on both blockquote borders.

background-color: #ccdfff; 
border: 5px #dfefff solid;
border-radius: 10px; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
color: #003366; 
line-height: 2em; 
letter-spacing: 0.2em; 
overflow: auto; 
padding: 20px; 

This leaves blockquote pushed right to the left edge of a "float: right" div. Blockquote border-right margins are ignored by IE9. Chrome has no problem displaying correct blockquote indentations.

---

I have tested parent-child adjustments, also display, float, and position selectors but these are not helpful. Anyone know how to correct IE blockquote margin collapse when blockquote is positioned beside a floating div?