SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    centering an element

    Hi,

    Can someone tell me why these styles don't do the same thing:

    Code CSS:
      <style type="text/css">
        * {
          margin: 0;
          padding: 0;
        }
     
        body {  
          background: red;
        }
     
        #wrapper{
          background: gray;
          width: 720px;
     
          position: relative;
          left: 360px;
        }
      </style>



    Code CSS:
    /* from "CSS Mastery: Advanced Web Standards Solutions" */
     
      <style type="text/css">
        * {
          margin: 0;
          padding: 0;
        }
     
        #wrapper{
          background: gray;
          width: 720px;
     
          position: relative;
          left: 50%;
          margin-left: -360px;
        }
     
        body {  
          background: red;
        }
     
      </style>
    The first one is noticeably off center to the right. With 0 margin and padding, I can't figure out why the two different styles produce different positions.

    Safari 3.0.4

    Thanks.

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
      <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
      <title>Test</title>
     
      <style type="text/css">
        * {
          margin: 0;
          padding: 0;
        }
     
        body {  
          background: red;
        }
     
        #wrapper{
          background: gray;
          width: 720px;
     
          position: relative;
          left: 360px;
        }
      </style>
     
    </head>
    <body>
      <div id="wrapper">hello world</div>
    </body>
    </html>

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,578
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Your first one just puts the element 360px off the left of the window. It would normally be 0px from the left, you've added 360 to that, and haven't done any centering.

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    If you are just trying to center a normal element then just using auto margins.

    Code:
    #wrapper{ 
          background: gray; 
          width: 720px;
    margin:0 auto;
    
        }
    Don't mess around with the other method unless you know why and where it would be useful

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    If you are not able to use the margin:0 auto; technique then there is another way.
    Code:
    <div style="positon:relative;height:300px;width:300px;background:blue;>
    <div style="position:absolute;top:0;left:50%;width:100px;height:100px;left:-50px;background:red;></div>
    Untested but it will work.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan,

    Please proof your code. The quoted attribute values are not closed, the parent <div> is not closed, and "positon" is an unknown property.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <div style="position:relative;height:300px;width:300px;background:blue;">
    <div style="position:absolute;top:0;left:50%;width:100px;height:100px;left:-50px;background:red;"></div>
    </div>
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •