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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How to center a div ?

    Hi

    I am a PHP coder and not very good at CSS. I wonder if there is away to center a div without using table or center tags ?

    Thanks.

    *******
    Tingoc

  • #2
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    484
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Put this within your div tags..

    Code:
    margin: 0 auto;
    width: #; /* replace the # with a proper value. */
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • Users who have thanked Chris Hick for this post:

    bulldorc (11-12-2010)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello bulldorc,
    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements left/right margins set to auto


    Here's a simple example:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {background: #FC6;}
    #container {
    	height: 400px;
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    }
    </style>
    </head>
    <body>
        <div id="container">
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    bulldorc (11-12-2010)

  • #4
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Great. Thank you both for quick responses

  • #5
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    484
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Don't forget to placed this as resolved.

    Steps:
    edit opening post>go advanced>set the prefix before the title as resolved
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^


  •  

    Posting Permissions

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