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 4 of 4

Thread: Align Divs

  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    67
    Thanks
    20
    Thanked 1 Time in 1 Post

    Align Divs

    How can I align a div so that it always goes into the center of the screen.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,746
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there UltimateCoder,

    does this help...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>centered element</title>
    
    <style type="text/css">
    body {
        background-color:#f0f0f0;
     }
    #container {
        width:960px;
        padding:20px;
        border:1px solid #000;
        margin:auto;
        background-color:#fff;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies sollicitudin nisi, 
    ut molestie felis adipiscing sit amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis. Vivamus at metus eget eros consequat fringilla. Quisque magna magna, laoreet 
    eu tempus sit amet, fringilla at tellus. Praesent felis tortor, scelerisque vitae fringilla 
    non, porttitor et lacus. Ut ut sapien nec quam tincidunt consectetur in nec lacus.
    </p><p>
    Phasellus porta, dui a elementum egestas, odio sapien rhoncus lorem, vitae bibendum erat sem 
    eget sapien. Maecenas ut metus ac quam pellentesque lacinia quis sit amet augue. Fusce eu 
    euismod urna. Nunc volutpat scelerisque tempus. Donec eget arcu et mauris scelerisque 
    tristique. Donec fringilla mauris dolor, sit amet vulputate lacus. Nulla feugiat mattis nulla 
    non tincidunt. Nam sit amet dolor eros, a viverra lacus. Nunc quis nisi eget neque tempus 
    facilisis eu quis sapien.
    </p>
    </div>
    
    </body>
    </html>
    
    coothead

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Location
    Cocoa Beach, Florida
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Aligning DIVS in CSS can sometimes be an issue. One way you could do it is to use the "margin-left" property and set it to a value of like 200px. You can experiment with that to see what the best value is, also I believe you can use % like 25% for that CSS property.

    At my employer we have a website for selling Electronic Components and I use the margin properties quite extensively within the website.

    Also this css will work independently of whatever coding platform you are using, whether it is ASP.NET or ColdFusion or PHP.

    Are you aware of the IE 6 CSS bug? for some reason in IE6 if you use the CSS margin the browser will double the value of the margin if the style has a "float:left;" very annoying. The fix for this is to make sure that the style has a "display:inline;" within it.
    Last edited by WA; 01-20-2012 at 01:55 PM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello UltimateCoder,
    Thought I might chip in a bit here...

    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto



    That takes care of the x axis.
    To center on the y takes a little more work. The best way by far is when you know the height of what you are trying to center on the y axis - vertical center (view the source to see how it's done)
    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


  •  

    Posting Permissions

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