CSS div Positioning

Discussion in 'CSS' started by jchemie, Sep 29, 2006.

0
  1. #1
    Hello Friends,
    I have recently started using CSS. I wanted to know that if i wanted to centre align the div like if i have a 102x786 resolution byt the div is only 780 px and want to centre align the div, then what shoulld i do? How can we centre align the layers??
    Could someone please guide me ?? its urgent.

    Thanks

    Jyot Vakharia
    www.jchem.info
     
    jchemie, Sep 29, 2006 IP
  2. Rouier

    Rouier Banned

    Messages:
    287
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #2
    A little hard to understand but you might want to research floats.
     
    Rouier, Sep 29, 2006 IP
  3. jchemie

    jchemie Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    what are floats. Could you tell or rather explain me?
     
    jchemie, Sep 29, 2006 IP
  4. phree_radical

    phree_radical Peon

    Messages:
    563
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I think you should set body{text-align:center} and continue with your div.
     
    phree_radical, Sep 29, 2006 IP
  5. M57

    M57 Peon

    Messages:
    41
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I'm not sure i understand what you want to accomplish here. To center the div itself, set the left and right margins to auto (ie: margin: 0 auto). To center the text within the div, use text-align:center on the div.
     
    M57, Sep 30, 2006 IP
  6. naif

    naif Well-Known Member

    Messages:
    468
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    118
    #6
    Hi JC. To center align a layer, you'll need to set its margin to 0px auto. Here is a small example:

    [code
    div.main { width: 780px; background-color:#f0f0f0; margin:0px auto }
    [/code]

    Inside the body, you may have 
    
<div class="main">Something something</div>
    Code (markup):
    If you try this under firefox, you'll see it works as planned where as it doesnt in Internet Explorer. The work around for IE is to add a text-align:center to the body class and then you'll need to add text-align:left to the main class.

    Here is the modified code. Works well for both IE and FF.

    
body {text-align:center}
div.main { width:780px; background-color:#f0f0f0; margin:0px auto; text-align:left}
    Code (markup):
     
    naif, Sep 30, 2006 IP
  7. M57

    M57 Peon

    Messages:
    41
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    This sample should work in standard-compliant browsers and IE6+ (don't bother wasting your time on taking care of IE5/5.5):
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <title>Sample</title>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <style type="text/css">
    #box
    {
      width: 200px; height: 200px;
      margin: 0 auto;
      background-color: #EAF4E9;
      border: 1px solid #333333;
    }
  </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
</html>
    Code (markup):
     
    M57, Sep 30, 2006 IP
  8. honeydesign

    honeydesign Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    try this :


    body {
    text-align:center;
    }

    #wrapper {
    width:780px;
    margin:0 auto;
    text-align:left;
    }
     
    honeydesign, Oct 1, 2006 IP
  9. JawaJubbo

    JawaJubbo Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    do u mean align a single div on centre of screen? if so then set left and right margins to auto and you will have a centred div.
     
    JawaJubbo, Oct 2, 2006 IP