html - How do you right-align text into a column? -


i'm trying shove paragraph on page right in image: right-align

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 values p elements content width css.

Comments

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

javascript - Add class to another page attribute using URL id - Jquery -

firefox - Where is 'webgl.osmesalib' parameter? -