CODEWITHSUNDEEP
csscss-floathtml
AMC
AMC

Reputation: 1695

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

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>

Upvotes: 3

Views: 6827

Answers (3)

Jay D.
Jay D.

Reputation: 672

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;
}

Upvotes: 2

GordonsBeard
GordonsBeard

Reputation: 646

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.

Upvotes: 2

user1386320
user1386320

Reputation:

Maybe this is what you want:

I've also added the text-align: right just in case, because you've mentioned that you want the text to go to the right, but not the whole container/blackquote.

EDIT I've forgotten that you have float: right in there, so here's another update without it:

Upvotes: 0

Related Questions