why is text align not working?

Discussion in 'HTML' started by richard, Oct 3, 2006.

  1. richard

    richard Guest

    Simple 3 division design. I want the text in the middle division to be
    centered.

    If I remove the "float" next to text-align, the right side division breaks.
    If I do it any other way, something breaks somewhere.
    Please answer only the question at hand. Yes it validates.


    <?xml version="1.0" encoding="windows-1252"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <!-- Created on: 10/2/2006 -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <title>test</title>

    <style type="text/css">
    body {background-color:white; width:100%; margin: 0 0 0 0;}

    #container{background-color:white; width:100%; margin:0 0 0 0;}
    #hd1{width:150px; height:150px; background-color:#0055ff; float:left; }
    #hd2{display:block; text-align:center; float:left; }
    #hd3{margin:0 0 0 0; width:150px; height:150px; background-color:#0055FF;
    float:right;}


    </style>


    </head>
    <body>

    <div id="container">

    <div id="hd1">
    sample left text
    </div>
    <div id="hd2">
    sample middle text
    </div>
    <div id="hd3">
    sample right text
    </div>


    </div>

    </body>
    </html>
    richard, Oct 3, 2006
    #1
    1. Advertising

  2. On Mon, 02 Oct 2006 22:23:28 -0600, "richard" <> let this
    slip:

    > Simple 3 division design. I want the text in the middle division to be
    > centered.
    >
    > If I remove the "float" next to text-align, the right side division
    > breaks.

    This works with modifications. see below. (also added general notes)

    > <?xml version="1.0" encoding="windows-1252"?>

    DON'T use windows-xxxx encodings in XML or web content in general. Use
    UTF-8 or an ISO encoding, such as iso-8859-1 (also known as latin1).

    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    > "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    > <html xmlns="http://www.w3.org/1999/xhtml">
    > <head>
    > <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"
    > />

    this is better set in an HTTP header. also, see above for the encoding.

    > <title>test</title>
    >
    > <style type="text/css">
    > body {background-color:white; width:100%; margin: 0 0 0 0;}
    >
    > #container{background-color:white; width:100%; margin:0 0 0 0;}
    > #hd1{width:150px; height:150px; background-color:#0055ff; float:left; }
    > #hd2{display:block; text-align:center; float:left; }

    remove the float.

    > #hd3{margin:0 0 0
    > 0; width:150px; height:150px; background-color:#0055FF; float:right;}
    >
    >
    > </style>
    >
    >
    > </head>
    > <body>
    >
    > <div id="container">
    >
    > <div id="hd1">
    > sample left text
    > </div>
    > <div id="hd2">
    > sample middle text
    > </div>
    > <div id="hd3">
    > sample right text
    > </div>

    swap hd2 and hd3, since hd3 will float "over" hd2. CSS float behaves just
    like img align.

    > </div>
    >
    > </body>
    > </html>


    Hope this helps.

    --
    Thomas Jollans alias free-zombie
    Thomas Jollans, Oct 3, 2006
    #2
    1. Advertising

  3. richard

    richard Guest

    By jove that worked like a charm thanks.
    richard, Oct 3, 2006
    #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. Kay
    Replies:
    2
    Views:
    7,149
  2. tshad

    text-align vs align

    tshad, Jun 23, 2005, in forum: HTML
    Replies:
    1
    Views:
    1,257
    David Dorward
    Jun 23, 2005
  3. Paul Lautman

    left align within centre align

    Paul Lautman, Mar 3, 2006, in forum: HTML
    Replies:
    3
    Views:
    574
    Paul Lautman
    Mar 3, 2006
  4. Mr. SweatyFinger
    Replies:
    2
    Views:
    1,842
    Smokey Grindel
    Dec 2, 2006
  5. Steve Richter
    Replies:
    1
    Views:
    896
    Mark Rae
    Jun 24, 2007
Loading...

Share This Page