Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Apr 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to center this...

    Hello All,

    I have a two column layout that I want to be centered, below is what I have can anyone tell me what is needed so that it shows center and not to the left as it is now thanks

    <style type="text/css">

    #container
    {
    width: 90%;
    margin: 10px auto;
    background-color: #fff;
    color: #333;
    border: 1px solid gray;
    line-height: 130%;
    }

    #top
    {
    padding: .5em;
    background-color: #ddd;
    border-bottom: 1px solid gray;
    }

    #top h1
    {
    padding: 0;
    margin: 0;
    }

    #leftnav
    {
    float: left;
    width: 160px;
    margin: 0;
    padding: 1em;
    }

    #content
    {
    margin-left: 200px;
    border-left: 1px solid gray;
    padding: 1em;
    max-width: 36em;
    }

    #footer
    {
    clear: both;
    margin: 0;
    padding: .5em;
    color: #333;
    background-color: #ddd;
    border-top: 1px solid gray;
    }

    #leftnav p { margin: 0 0 1em 0; }
    #content h2 { margin: 0 0 .5em 0; }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="top">
    <center><h1><img border="0" src="../images/xxx.jpg" width="537" height="55" alt="sample"></h1></center>
    </div>
    <div id="leftnav">

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is centered when a DOCTYPE is set -

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <title>Untitled Document</title>
    
    <style type="text/css">
    
    #container
    {
    width: 90%;
    margin: 10px auto;
    background-color: #fff;
    color: #333;
    border: 1px solid gray;
    line-height: 130%;
    }
    
    #top
    {
    padding: .5em;
    background-color: #ddd;
    border-bottom: 1px solid gray;
    }
    
    #top h1
    {
    padding: 0;
    margin: 0;
    }
    
    #leftnav
    {
    float: left;
    width: 160px;
    margin: 0;
    padding: 1em;
    }
    
    #content
    {
    margin-left: 200px;
    border-left: 1px solid gray;
    padding: 1em;
    max-width: 36em;
    }
    
    #footer
    {
    clear: both;
    margin: 0;
    padding: .5em;
    color: #333;
    background-color: #ddd;
    border-top: 1px solid gray;
    }
    
    #leftnav p { margin: 0 0 1em 0; }
    #content h2 { margin: 0 0 .5em 0; }
    
    </style>
    
    </head>
    
    <body>
    
    <div id="container">
    <div id="top">
    <center><h1><img border="0" src="../images/xxx.jpg" width="537" 
    
    height="55" alt="sample"></h1></center>
    </div>
    <div id="leftnav">
    
    </body>
    
    </html>
    And you shouldn't really be using the <center> tag.

  • #3
    New Coder
    Join Date
    Apr 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok I do have the doc type but it coming to the far left of the page which is what I did not want look at this, page thanks mark87


  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    css:
    Code:
    body {
    text-align: center; /* because IE/Win's worth it ;) */
    }
    
    #container {
    text-align: left; /* re-establish left alignment */
    margin: 0 auto; /* how to center in a decent browser */
    ...
    }
    hth

  • #5
    New Coder
    Join Date
    Apr 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Bill and mark87,

    I think I know why it does not look centered, at home on my xp computer it looks fine but at work since the system was Win NT it look different also I believe at work the browser version was different. Yesterday my work computer was upgraded to xp pro along with a new IE version it look fine. Thanks to both of you for your help with this.


  • #6
    Regular Coder
    Join Date
    Jan 2005
    Location
    Essex
    Posts
    146
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That still isnt any good though because you would want it to show on all browsers and operating systems dont you? .

    Not everyone will be running windows xp and the most upto date version of IE?
    Danny Hayes
    Under Construction www.hayes-design.co.uk


  •  

    Posting Permissions

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