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 “mark” a UL/LI nav item as “active” based on click?

    How to make css border like this? [closed]

    How to keep CSS from render-blocking my website?

    How to write media queries for HD/Retina Display in Landscape position?

    How can I get the font size of an element as it was set by css

    How to emulate Google's thick, red underline text decoration

    How do I use css transitions to scale an image and move it at the same time?

    How can I have a 2 column layout with one of the columns with a fixed width and the other with the remaining width?

    how to “replace” css Properties with jQuery

    How to give option to add css classes/IDs to content to in CMS's WYSIWYG content builder/editor to non-technical client?

    How To create slider/toggle to change font size on screen with HTML CSS JS [closed]

    How to make these jquery pop ups fall back to css when javascript disabled

    How can these images to fit on the screen?

    Slideshow picture disapears

    How does Mashable.com displays/hides an element through Css?

    bootstrap css, how to make full width div inside container

    How to prevent HTML code in a literal inside a DIV from affecting outer page styles

    How can I shift up a div and all divs that follow it?

    How does the resizing api on the App Engine Imagine API work?

    Rails: How to control CSS, Javascript files

    How to get use the functionality same as “-webkit-appearance” in firefox?

    How to vertically center text span in fixed position div?

    How to use min-width for “float:right” element in CSS?

    How fixed a navigation to the center on scroll?

    CSS - how to code the left column gets narrower when resizing the window?

    Looping through my table, how do I know if the checkbox is checked?

    How can a CSS id style be accessed in jquery?

    How to make irregularly-shaped SVGs overlap while maintaining all areas clickable?

    How to add JS and CSS to all content parts in an Orchard module

    How to deal with DIV position and height