Problems with text-alignments.

Discussion in 'HTML' started by Fro, Apr 8, 2008.

  1. Fro

    Fro Guest

    Hi,

    very often I need to put two short pieces of text in one line such
    that the first piece is aligned to the left of the line and the second
    one to the right. The way I do it is as following:

    <table width='100%' border='0'><tr><td>
    <div align='left'> piece 1 </div>
    </td><td>
    <div align='right'> piece 2 </div>
    </td></tr></table>

    But I think it is not an elegant way to solve the problem. Do you know
    a better one? (Pleas do not tell me to go to work in MacDonald's :) )
    Fro, Apr 8, 2008
    #1
    1. Advertising

  2. Fro

    asdf Guest

    "Fro" <> wrote in message
    news:...
    > Hi,
    >
    > very often I need to put two short pieces of text in one line such
    > that the first piece is aligned to the left of the line and the second
    > one to the right. The way I do it is as following:
    >
    > <table width='100%' border='0'><tr><td>
    > <div align='left'> piece 1 </div>
    > </td><td>
    > <div align='right'> piece 2 </div>
    > </td></tr></table>
    >
    > But I think it is not an elegant way to solve the problem. Do you know
    > a better one? (Pleas do not tell me to go to work in MacDonald's :) )


    Try this below (styles declared inside HTML, but easy enough to incorporate
    into your external stylesheet).

    The idea is that the text 'floats' to either left or right. Note that a
    0.5em spacing is applied to left or right to ensure at least a 1em space
    between the elements.

    Beware of the 'clearright' css class... it may misbehave if you have other
    right-floating elements in your page.

    Not really sure if it's more 'elegant', but worth consideration?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Tester</title>
    <style type="text/css">
    <!--
    ..lefttext {
    text-align: left;
    float: left;
    margin-right: 0.5em;
    }
    ..righttext {
    float: right;
    margin-left: 0.5em;
    text-align: right;
    }
    ..clearright {
    clear: right;
    }
    -->
    </style>
    </head>
    <body>
    <div class="lefttext">leftmost text area</div><div
    class="righttext">rightmost text area</div>
    <p class="clearright">next paragraph next paragraph next paragraph next
    paragraph next paragraph next paragraph next paragraph next paragraph next
    paragraph next paragraph next paragraph next paragraph next paragraph next
    paragraph next paragraph next paragraph next paragraph next paragraph next
    paragraph next paragraph next paragraph next paragraph next paragraph next
    paragraph next paragraph next paragraph next paragraph next paragraph next
    paragraph next paragraph next paragraph next paragraph next paragraph next
    paragraph next paragraph next paragraph next paragraph next </p>
    </body>
    </html>
    asdf, Apr 8, 2008
    #2
    1. Advertising

  3. Fro wrote:
    > Hi,
    >
    > very often I need to put two short pieces of text in one line such
    > that the first piece is aligned to the left of the line and the second
    > one to the right. The way I do it is as following:
    >
    > <table width='100%' border='0'><tr><td>
    > <div align='left'> piece 1 </div>
    > </td><td>
    > <div align='right'> piece 2 </div>
    > </td></tr></table>
    >
    > But I think it is not an elegant way to solve the problem. Do you know
    > a better one? (Pleas do not tell me to go to work in MacDonald's :) )


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="content-language" content="en-us">

    <title>bookends</title>

    <style type="text/css">
    div.bookends { text-align: right; }
    div.bookends span { float: left; }
    </style>
    </head>
    <body>
    <div class="bookends"><span>piece 1</span>piece 2</div>
    </body>
    </html>


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Apr 8, 2008
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Joey
    Replies:
    2
    Views:
    977
  2. Lorentz
    Replies:
    4
    Views:
    1,133
    Lorentz
    Feb 27, 2004
  3. Susan Baker
    Replies:
    2
    Views:
    809
    kelvSYC
    Jun 26, 2005
  4. Shelly

    Problems, problems for newbie

    Shelly, Sep 2, 2007, in forum: ASP .Net
    Replies:
    1
    Views:
    2,180
    Shelly
    Sep 3, 2007
  5. leo
    Replies:
    1
    Views:
    275
    Bob Lehmann
    Dec 5, 2005
Loading...

Share This Page