I really like magazine layouts. I like those little boxes with additional information or quotes inside the main body of the text but if you want to do something similar in your web pages it can be extremely frustrating to get it looking good.
Here’s one method for creating a quote box.

Step 1. Create your quotation marks. Use something like GIMP to create 2 files for each quotation mark using a font and colour of your choice. Unfortunately if you want it to look alright in Internet Explorer you’ll either need to save this with a background colour to match your quote area or you’ll have to save it as a transparent GIF. IE does not handle transparent PNGs well and definitely won’t cope with SVGs without a plugin.
Here’s how mine look. I opted for GIFs.

Step 2. Write your code.
Make a new blockquote and within that a paragraph tag. Why put a paragraph inside a blockquote? You’ll see in a minute.

<blockquote class="quote">
<p>Your quoted text goes here. </p>
</blockquote>

Step 3. Position your quotation marks.
To avoid having your images floating around all over the place and positioning themselves based on the text, it’s usually better to position it as a background image. It’s an especially useful thing when your text is generated dynamically and you don’t know how long it will be.
Now the reason for having the <p> tag becomes clear. Each element can only have 1 background image, so if you position the opening quote as the background image to the blockquote you need another element to put the closing quote in; the closing quote becomes the background of the paragraph tag.

The CSS for this would be something like this:

blockquote.quote {
padding: 3px 3px 0px 3px;
width:90%;
background-color: #F0F0F0;
background-image: url(leftquote.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 20px;
}

blockquote.quote p {
padding-bottom: 1.3em;
background-image: url(rightquote.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

The important parts there are background-image, background-repeat and background-position. They’re pretty self explanatory - choose the background image, position it and tell it not to repeat to avoid having a tiled background.

Put that all together and you should have something like this:

Your quoted text goes here.
There’s no point in viewing the source for this bit since wordpress likes to add its own stuff and take away mine. I had to write some horrible code to make it work.