[thelist] right-align with right-edge padding

John DeStefano john.destefano at gmail.com
Tue Mar 7 09:13:04 CST 2006

>> A quick CSS styling question: I would like to right-align some text
>> within a "ribbon" as a page header; no problem using "width: 100%;"
>> and "text-align: right;".  But I'd also like to buffer the text a
>> specific distance (say, 30px) away from the right-hand edge of the
>> page.  I have tried padding to the right, margin, even text-indent
>> (which would work if the text were left-aligned; it doesn't seem to
>> work "backwards"), but I can't get the text to budge away from that
>> right-hand edge, at least not in IE6 or Firefox 1.5 on WinXP.

>May help if you post some code/url as this should be straightforward,
>inline example
><p style="width:100%;padding-right:30px;text-align:right;background:red">text

Thanks Ben.  Agreed: it certainly _seems_ straighforward, but I must
be missing something... here's my CSS:

#BannerMain {
	background-color: #BD0000;
	color: White;
	width: 100%;
	text-align: right;
	font-weight: bold;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	vertical-align: middle;
	padding: 0px,30px,0px,0px;
	text-indent: 30px;

... and here's the callout in HTML:

<div id="BannerMain"><p>text here</p></div>

All is well except the right-edge spacing.  I added "padding" and
"text-indent" individually to see if either might work; neither did.


More information about the thelist mailing list