[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
>here</p>
>
>Ben.
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.
Thanks,
~John
More information about the thelist
mailing list