How to shorten blockquote for wrapping around a floating div?

Question

I have a problem with css. I put a test page here: http://georgecrawford.com/test/ for verification.

I have a left floating sidebar div and the main content that follows it (and which should wrap it). If the content is just paragraphs, there is no problem, because the text wraps around the float well. However, I have a few blockquote in the content, and I would like them to have a background color and / or border. The text is not a problem, it wraps perfectly around the sidebar . However, blockquote itself covers the entire width of div content , which means that the border around it will work on top of the top panel .

How can I guarantee that the blockquote in the content is cut horizontally to be the same width as the text lines ("linear fields") inside them? Paragraphs have the same behavior, but I do not need a border around my paragraphs!

Thanks for any help!

Answer 1

I came across a potential solution to this problem.

If I set all blockquotes with the CSS overflow: auto property, it will reduce them to the desired width if they otherwise overlap the pop-up sidebar. I updated the demo at http://georgecrawford.com/test/ so you can see the difference. It is perfect for Safari / OS X, but I have not tested it in other browsers yet.

Any comments? Does this solution have any flaws? Thanks again for your help.

Answer 2

In IE 9, "overflow: auto" fixes the blockquote lining or the overlap of a div floating in one direction, however overflow correction does not allow for standard blockquote indents to be specified 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 causes the blockquote to push directly to the left edge of the "float: right" div. The border field lock on the right is ignored by IE9. Chrome has no problem displaying the correct blockquote padding.

---

I tested the settings of the parent and child elements, as well as the display, float and position switches, but this does not help. Does anyone know how to adjust IE difference of blockquote IE marker when blockquote is placed next to floating div?

Answer 3

The problem is not in the block query, which just does what it says, it stretches to 100% of its parent width. This is a parent div with id content that does not have a float property and thus goes through a floating div .

Can you try putting the sidebar as a child in content , rather than as a sibling? I think blockquote should adhere to the rules of width.

Alternatively, you can always set the blockquote to display: inline , but this may not be the way you want, since it will no longer stretch to full width.