Question

I’m trying to float a large left curly quote so that the blockquote sits just to the left of it. I’m having a couple of issues though.

1) The text in the p tag continues to wrap around the quote symbol even though I declare clear: right; on the blockquote. I have never understood how floats are supposed to work so can someone offer some suggestions on how to get this to work?

2) Disregarding the issue above, the text inside doesn’t line up with the top of the quote symbol itself however when I apply margin-top to the blockquote, it doesn’t move at all. Suggestions?

I know I could solve this by using a background image of a quote symbol on the blockquote but I would like to do this with text.

HTML:

<div class="quote_symbol">&ldquo;</div>

<blockquote>To be or not to be</blockquote>

<p>Some other text on the page below</p>

CSS:

.quote_symbol{font-size: 4.5em; float:left;}
blockquote{clear:right;}

Answer 1

Presuming you want the quote text to sit just to the right of the curly quote symbol. What about changing your markup to:

<blockquote>
     <div class="quote_symbol">&ldquo;</div>
     To be or not to be
</blockquote>

<p>Some other text on the page below</p>

And your CSS to:

blockquote              { position: relative; padding-left: 4.6em; }
blockquote.quote_symbol { position: absolute; top: 0; left: 0;
                          font-size: 4.5em; }

Or something similar?