How do you right-align text into a column?


Tags: html,css

Problem :

I'm trying to shove a paragraph on my page to the very right like it is in this image: Right-Align

I want a large, left-aligned title with a small right-aligned paragraph on a page. So far, I can't get the CSS make it look anything like this but I'm guessing it isn't too difficult. Any ideas on how to go about 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 is my title and naturally left-aligns, but .rectangle-container p comes up seemingly right-aligned, however it doesn't stack the text at all and ends up spanning the entire page.



Solution :

You can do this with left side margin on your text <p> block.

So you set your text to be justified, and right align the whole block with a large left side gap, which combined with the width of the text fills the container.

.rectangle-container p {
color: $white;
text-align:justified;
width:70%;
margin-left:30%;
padding:0;
}

I would think that using padding would not work as well as by default padding is contained within the width attribute, whereas margin is outside the width. If the above example is substituted padding for margin, the padding would be a percentage of the 30% width, which would be clearly incorrect.

Notes:

  • This solution works as long as Width + margin + padding + border = 100% of container. So if down the line you add a padding or a border then you should adjust the other values accordingly. Browsers will accept these values but occasional browser behaviour can be a bit unexpected if the sum of these elements is above 100% width of the container box.
  • As a general guide try to avoid odd number values for percentage widths.
  • You can use CSS3 calc(); values to get dynamic values for the p elements content width CSS.

    CSS Howto..

    How to attach an element on the dynamically created div

    CSS- How to align background image over bottom border line? Jsfiddle included

    How to make combination of images responsive?

    I am not sure how to convert my webpages Table over to divs instead

    Dropdown not showing on small screens

    How to create a cross with pure css [duplicate]

    How to make a sliding menu similar to the Facebook Mobile side menu with html,css,jquery?

    How to make a full width image with fixed height in bootstrap?

    How to exclude leading hyphens from justification in dialogue lines using CSS + HTML?

    css scroll/touch slide view - how to use -ms-scroll-snap or the like?

    How to switch css based table column with nested content using jquery?

    How to display Highcharts in rows (5)

    How does Outlook.com have the title text underlined?

    How to remove CSS spaghetti in legacy web app?

    How to stop divs moving under each other when zooming out

    How to create an infinite easing in and out CSS animation loop?

    How to get page-header and nav-pills to appear on the same line

    How can i prevent divs from moving while resizing the page

    AngularJS - how to refactoring a CSS code style

    How to wrap a vertical overflow horizontally in css?

    How to solve this HTML/CSS bug? [closed]

    How can I make a scrolling DIVs background transparent?

    How to get the value of css property with jQuery

    HTML/CSS slight sideways scrollability, how to find source? [closed]

    How can I select the first paragraph in this code?

    How to create a triangle in CSS3 using border-radius

    How to get WebView to ignore css

    Box-shadow is overlapping other elements, how can I fix it?

    If the tabs use all images to show text + icon on each tab, then how to add text to to help search engine to find the keywords on the tabs?

    How to make a vector background image in css instead of using jpg or png