Hi there, On www.obsessedwithfilm.com I want to have my <blockquote> have a background colour and border. It looks good like this, until I put it somewhere near the top of a post, where it clashes with the image on the left and the box goes underneath or above (browser dependent) the image. At the moment I took the background colour away from all my blockquote's as it was obviously untidy. How can I have it so they wrap around the images? The text within the blockquote wrap's just fine, but the background colour (the actual box) doesn't.
That is correct behavior. The box is unaware of the float element and underlies it, while the inline content wraps. Not tested, but worth trying: blockquote { overflow: hidden; border: 1px solid black; background-color: yellow; color: black; } Code (markup): The overflow hidden creates a new block formatting context, causing the box to lie beside the float. There will be no wrap at all. cheers, gary
That did work, but the problem then lies in that the quote creates loads of whitespace under the image until the rest of the text starts. Is there no way to wrap?
Not if you want to delimit the blockquote box. The box itself can't wrap, only the inline content of the box does that. cheers, gary