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.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  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
    18,914
    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