Blockquote - wrap around images?

Discussion in 'CSS' started by hitmanuk2k, Mar 31, 2007.

  1. #1
    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.
     
    hitmanuk2k, Mar 31, 2007 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    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
     
    kk5st, Mar 31, 2007 IP
  3. hitmanuk2k

    hitmanuk2k Peon

    Messages:
    530
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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?
     
    hitmanuk2k, Mar 31, 2007 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    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
     
    kk5st, Mar 31, 2007 IP