How to format HTML/CSS to align with single word in sentence?


Tags: html,css

Problem :

I'm not sure how to refer to what I need to do. So here is an example of the formatting.

Where ABC is the Actual Before Calculation
        A is the total population of the US
      XYB is the percentage that own their own homes
      XYC is the percentage in a rural area

Notice how all the sentences are aligned with the word is. It's kind of a smart indenting, for lack of a better term. You have the right term, then please enlighten me.

I've not found an HTML/CSS page that does this, but I have seen it in print. Or would PHP be needed to do this? Thanks!



Solution :

You can use a Definition List for this:

HTML

<dl>
    <dt>Where ABC is</dt>
    <dd>the Actual Before Calculation</dd>
    <dt>A is</dt>
    <dd>the total population of the US</dd>
    <dt>XYB is</dt>
    <dd>the percentage that own their own homes</dd>
    <dt>XYC is</dt>
    <dd>the percentage in a rural area</dd>
</dl>

CSS

dl {
    border: 3px double #ccc;
    padding: 0.5em;
}
dt {
    float: left;
    clear: left;
    width: 140px;
    text-align: right;
    font-weight: bold;
    color: green;
}
dd {
    margin: 0 0 0 145px;
    padding: 0 0 0.5em 0;
    min-height: 1em;
}
   

Demo


    CSS Howto..

    How to make transparent arrow? [duplicate]

    How to contents of div onclick tab

    How to design a full width bar with HTML and CSS [closed]

    How to validate HTML/CSS running in localhost?

    How can I set the color of the border area around the page/post on my Wordpress Site

    Font not showing properly in HTML page

    How to expand wrapper when content is more?(with CSS)

    How to get rid of spaces between images in CSS?

    How to get dimensions for a background image when background-size is set to contain?

    How can I organize my css rules?

    How to expand a div to its content width WHEN it is larger than its parent?

    How to blur only background and not content in Ionic/CSS

    CSS: How to specify table's height such that a vertical scroll bar appears?

    How To Design a Website for the Non-Designer that takes full advantage of JQuery on the client?

    How to add rows to a responsive grid

    Selenium IDE: How to check text color using CSS

    How to fit HTML table row to its content

    How do you prevent buttons from merging into each other with the .btn-group class in bootstrap?

    How to select nested elements using standard CSS selectors (nth-of-type or nth-child) for Selenium?

    How to link css files to work correctly with wamp server?

    How to use HTML classes and ID's

    Bootstrap 3 / CSS: How to properly vertically align in panel heading

    How can I convert this from jQuery to vanilla JS?

    How does one load a CSS framework in Rails 3.1?

    How to cancel out .table width:100% in bootstrap css

    How to style ul horizontally

    How do I make the child-div to have a fixed position?

    How to conditionally load CSS and extend it using SASS/SCSS

    How to control the expandability of textarea from width perspective

    How to add a repeating png image in the background of a webpage using CSS?