styling blockquote - have to float:right, but want blockquote centered

Question

I'm trying to style my blockquotes so that they are removed from the regular text, with a different color background. The best way I found to make them stand out from the regular text is to use float:right, however, I do not want the blockquote to be forced to the right side of the paragraph(ideally, I'd like it to be centered). How an I achieve this effect?

To be clear, I want the text within the block quote to remain left-justified. The entire form of the blockquote is what I would like to be centered.

jsfiddle

.blockquote {
    width: 75%;
    float: right;
    margin-top:20px;
    margin-bottom: 20px;
    padding: 20px;
    background: #0fddaf;
    background: rgb(15, 221, 175); /* Fall-back for browsers that don't support rgba */
    background: rgba(15, 221, 175, .15);
    font-family: fanwood_italic-webfont;
}

.blockquote p {
    padding: 10px

}

<span class="blockquote">Being good in business is the most fascinating kind of art. Making money is art and working is art and good business is the best art.</span>

Answer 1

Instead of floating it why don't you just set your .blockquote to display: block and remove the float? Then you can just use margins/paddings to get it where you want without having to worry about the content resizing on you*.

*Much.

Answer 2

Change span to div. Then remove float:right, and add in margin: 0 auto;

http://jsfiddle.net/ecCCu/3

<div class="blockquote">Being good in business is the most fascinating kind of art. Making money is art and working is art and good business is the best art.</div>

.blockquote {
    width: 75%;
    margin: 0 auto;
    margin-top:20px;
    margin-bottom: 20px;
    padding: 20px;
    background: #0fddaf;
    background: rgb(15, 221, 175); /* Fall-back for browsers that don't support rgba */
    background: rgba(15, 221, 175, .15);
    font-family: fanwood_italic-webfont;
}