How to right align a line break in HTML?

July 24, 2005 10:47 AM

How do I right align a line break in HTML? I can right align a paragraph, but I don't want the double space in between my lines. Can I create a paragraph that doesn't double space? I want to be able to quote someone on my site, then list the source directly under the quote, aligned right, without the double space.
posted by jruckman to Computers & Internet (11 answers total)

this might do it (untried):

css:
.quoted {text-align: right}

html:
<blockquote>blah blah<br/><span class="quoted">name</span></blockquote>
posted by andrew cooke at 11:03 AM on July 24, 2005

Okay, let's assume you have something like:

[blockquote][p]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque sed dolor. Integer commodo. Proin vitae enim nec tortor rhoncus egestas. Donec eget sem at neque dapibus nonummy. Duis vel nisl. Cras sollicitudin, nunc ac placerat elementum, lorem elit molestie libero, nec ullamcorper augue metus lacinia tortor. Nullam et ligula. Cras fermentum tincidunt urna. In massa. Aliquam vel elit. Nam wisi nibh, feugiat sed, blandit eget, fermentum ac, orci.[/p]

[p class="source"]by Lorem Ipsum[/p][/blockquote]

(supstituting <> for []) If you have too much space between your two paragraphs then that's because of padding/margins on the elements. You can use the Firefox DOM inspector to find out exactly which rule is causing you problems. Your CSS rules might look like:

p.source {
text-align: right;
margin-top: 0px;
padding-top: 0px;
}

Or maybe something like:

blockquote p {
margin: 0;
padding: 1.5em .4em 0 .4em;
}

blockquote p:first-child {
padding-top: 0;
}

blockquote p.source {
padding-top: .75em;
}

But I don't think that will work in IE. Either way, look at the Firefox DOM inspector and see which element exactly is adding the undesired padding (or give us an example).
posted by sbutler at 11:19 AM on July 24, 2005

Looking at the question again, perhaps you meant not double spacing the attribution. In that case, look at the line-height property. You'd want something like:

p.source {
text-align: right;
line-height: 1em;
}
posted by sbutler at 11:24 AM on July 24, 2005

Response by poster: thanks, but no dice -- i think the body text CSS is overriding the .quoted CSS. i just tried this on the first quote in the most recent post on my site, and you can see that it still left aligns the source. maybe i did the .quoted CSS wrong? it goes:

.source {
     text-align: right
     }

... and i put it under the blockquote style, although I don't think it makes much difference. i'm using WordPress BTW, don't kow if that changes anything.
posted by jruckman at 11:29 AM on July 24, 2005

Response by poster: more came in as i was posting this last one -- it was in reply to andrew cooke
posted by jruckman at 11:33 AM on July 24, 2005

sbutler's reply is better than mine (more likely to work and better structured html). sorry!
posted by andrew cooke at 11:36 AM on July 24, 2005

Response by poster: sbutler: even if i set the line-height to 1em, if I give the attribution its own [p] to allow for right-alignment, it still gives me the double space typical of a new [p].

i want the quote to look like:

"i have something important to say."
- Everyone

... except Everyone will be right aligned, and still immediately below the quote.
posted by jruckman at 11:39 AM on July 24, 2005

Response by poster: my site has your (sbutler's) CSS implimented right now - first quote in most recent post. it gives me a new right aligned [p], but still a double space.
posted by jruckman at 11:47 AM on July 24, 2005

Best answer: Alright, your problem is a 12px margin on the top and bottom of your paragraph elements. Try this:

p.source {
text-align: right;
margin-top: -12px;
}
posted by sbutler at 11:48 AM on July 24, 2005

Response by poster: sbutler: mmm, that hits the spot! thanks all!
posted by jruckman at 11:52 AM on July 24, 2005

if you cant get it snug, try negative margins or position:relative.
either one lets you do this. In any case, you will have to fix the width of the blockquote with a container.

<style>
.container {width:250px;border:1px solid red;}
.attribline {text-align:right;margin-top:-1em;}
</style>
<div class="container">
<blockquote>
“Here is a witty thing”
</blockquote>
<div class="attribline"><cite>— timmy</cite></div>
</div>
posted by clord at 11:55 AM on July 24, 2005