Question

I’m having trouble doing a simple quotation where the quotation is centered / floats on the page, and the person’s name underneath the quote aligns to right side, as one often sees.

I tried changing the text-align of the person’s name paragraph to “right”, but that did not resolve it (it put it too far over to the right). So, I left text-align alone (as “center”) and then tried adding padding-left and margin-left, but both of those were ignored, leaving the person’s name in the center. Can you tell me why these (padding and margin) are ignored, and also a good way to do the alignment, such that the “whose-it-by” line matches up to the quote at the right-edge?

You can see the page here, with quotation at the top in the gray header area: http://www.momentumnow.biz/mn/direct/testimonials2.shtml

I want to move the name over, but am curious why padding and margin don’t seem to have an affect with text-align.

Thanks.

Answer 1

The fact that you have two p elements means that they are displayed on separate lines – p means paragraph. Try placing one inside the other, or wrap both in a div, and apply absolute positioning. Alternatively, use my preferred method which is to change them to span tags.

Remember, <p> is a block-level element, whereas span is an inline element.

From what I understand, you want to achieve something like this. Try using float: right

You could also use the CSS

p.yourclass {text-align: right}

Solution: http://jsfiddle.net/TqE2x/