SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2002
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centered layout in HTML 4.01 Strict

    Hey Folks

    I am wondering if anyone has a solution for this. I am trying to devise a simple means to create a centered layout. The following validates (http://validator.w3.org/) OK and works pefectly in IE6, but does not center in NS7.01.

    Code:
    <!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-5">
     <title>Centered Box</title>
     
     <style type="text/css">
     
     body
     {
      text-align: center;
      background-color: #626262;
     }
     
     #center
     {
      position: relative;
      width: 500px;
      background-color: #dcdcdc;
      padding: 20px;
      text-align: left;
     }
     
     </style>
     
    </head>
    <body>
     <div id="center">
      The rain in Spain falls mainly on the plains. The rain in Spain falls mainly on the plains. 
      The rain in Spain falls mainly on the plains. The rain in Spain falls mainly on the plains. 
      The rain in Spain falls mainly on the plains. The rain in Spain falls mainly on the plains. 
      The rain in Spain falls mainly on the plains. The rain in Spain falls mainly on the plains. 
      The rain in Spain falls mainly on the plains. The rain in Spain falls mainly on the plains. 
     </div>
    </body>
    </html>
    Any ideas about how to get this to center in NS? I don't have Opera so I haven't checked it in that but I would be interested if anyone else checks it in that.

    Cheers!

  2. #2
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by grahowler
    Code:
     #center
     {
      position: relative;
      width: 500px;
      background-color: #dcdcdc;
      padding: 20px;
      text-align: left;
      margin: 0 auto;
     }
    Google: css centering html

    Douglas
    Hello World

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2002
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply, That works a treat and validates but I can't find reference to "auto" in the secification (http://www.w3.org/TR/1998/REC-CSS2-19980512/box.html).

    Am I looking in the wrong place?

    Cheers.

  4. #4
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by grahowler
    Am I looking in the wrong place?
    Yes and no.

    On that page, you have to scroll down to "8.3 Margin properties" and then click the link:

    auto
    See the section on computing widths and margins for behavior.
    Which takes you to 10.3 Computing widths and margins and then you have to scroll down to "10.3.3 Block-level, non-replaced elements in normal flow" and read this line:

    If both 'margin-left' and 'margin-right' are 'auto', their computed values are equal.
    And then you have to realise that that is a technical description of what "centering" does.

    And to understand my example, you also have to have read this:

    If there are two values, the top and bottom margins are set to the first value and the right and left margins are set to the second.
    Back in 8.3 Margin properties:... and 'margin'

    See, all there

    And just for fun, take a pop over to 16.2 and you'll see this:

    This property describes how inline content of a block is aligned.
    Your div is a block, not inline content, so text-align should not be able to move it: that means that your code should not work in IE, even though it does That means that according to the specs, your original code was based on a buggy browser

    Douglas
    Hello World

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2002
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Understood!

    That is EXTREMELY helpful Douglas.

    Thanks a million!


Bookmarks

Posting Permissions

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