www.webdeveloper.com
Results 1 to 6 of 6

Thread: how to control page alignment

  1. #1
    Join Date
    Jul 2004
    Posts
    329

    how to control page alignment

    Hello

    I am looking for the correct way to control the alignment of elements in my HTML page.
    in the old days, I used to add the <center> tag whenever I wanted to center some content.
    if I wanted to set the alignment of content inside a table cell, I would use <td align="left"> or <td align="center">

    I also noticed the CSS rule text-align.
    My question is, what is the correct way to use CSS to align elements so that it adhere with strict DTD rules

    regards

  2. #2
    Join Date
    Jul 2003
    Location
    Los Angeles California
    Posts
    1,045
    you can use float:left; or right...

  3. #3
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Look into the styles "text-align:center" and "margin:xxx auto" here.

  4. #4
    Join Date
    Jul 2003
    Location
    Los Angeles California
    Posts
    1,045
    Originally posted by ray326
    Look into the styles "text-align:center" and "margin:xxx auto" here.
    Which will make your whole layout centerd in the screen
    heres an example http://doubleimage.net/faux.html

  5. #5
    Join Date
    Jul 2004
    Posts
    329
    Thanks for the replies

    I have tried to use the correct HTML/CSS code to center a simple page like so:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    <head>
      <title>test</title>
    </head>
    <body>
     <div style="margin: 10px auto">
      test
     </div>
    </body>
    </html>
    can you see what is going on wrong? The content gets displayed left aligned and not centered

  6. #6
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,537
    You need to specify a width for the div, else it will take up the available space. Here is the "suspenders and a belt" approach (center the div AND center the text within the div):
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    <head>
      <title>test</title>
    </head>
    <body>
     <div style="width: 4em; text-align: center; margin: 10px auto">
      test
     </div>
    </body>
    </html>
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles