html - How do you right-align text into a column? -
i'm trying shove paragraph on page right in image:
i want large, left-aligned title small right-aligned paragraph on page. far, can't css make i'm guessing isn't difficult. ideas on how go doing this?
css:
.rectangle-container .title { color: $white; margin: 0 .5em; padding: 1em 0 0 3em; font-family: opensans, "helvetica neue", helvetica, arial, sans-serif; text-shadow: 0 2px 1px rgba(0, 0, 0, .5); } .rectangle-container p { color: $white; text-align: right; }
.rectangle-container .title title , naturally left-aligns, .rectangle-container p comes seemingly right-aligned, doesn't stack text @ , ends spanning entire page.
you can left side margin on text <p>
block.
so set text justified, , right align whole block large left side gap, combined width of text fills container.
.rectangle-container p { color: $white; text-align:justified; width:70%; margin-left:30%; padding:0; }
i think using padding
not work default padding contained within width
attribute, whereas margin
outside width. if above example substituted padding margin, padding percentage of 30% width, incorrect.
notes:
- this solution works long
width + margin + padding + border = 100%
of container. if down line add padding or border should adjust other values accordingly. browsers accept these values occasional browser behaviour can bit unexpected if sum of these elements above 100% width of container box. - as general guide try avoid odd number values percentage widths.
- you can use css3
calc();
values dynamic valuesp
elements contentwidth
css.
Comments
Post a Comment