How to center Div

Discussion in 'HTML & Website Design' started by irule272, May 15, 2009.

0
  1. #1
    Hello I have a div with fix height and width, All my content is there.

    What I want is to center that div so that regardless of what the resolution of the monitor is that div will still be on the center of the body.

    How will I able to this?

    Thanks! :)
     
    irule272, May 15, 2009 IP
  2. Masterful

    Masterful Well-Known Member

    Messages:
    1,653
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    140
    #2
    For a more accurate answer, you should provide your code, both the HTML and the CSS. However, I think that simply adding the following CSS to the styling of your div should do it.

    First, give your div an ID, thus:

    <div id="div_id"></div>
    Code (markup):
    Then, add this to your CSS:

    #div_id {
margin: 0 auto;
}
    Code (markup):
    You can also use absolute or relative positioning, but I would avoid doing so.

    Note that the method above won't work on IE 5. But, then, who cares, right?
     
    Masterful, May 15, 2009 IP
  3. OmegaMan

    OmegaMan Peon

    Messages:
    12
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Do this with CSS:

    .center-div {
    margin-left: auto;
    margin-right: auto;
    }

    That's how I do it, and it should work :)

    EDIT: Masterful beat me to it, so know you have two possible solution :)
     
    OmegaMan, May 15, 2009 IP
  4. Kerosene

    Kerosene Alpha & Omega™ Staff

    Messages:
    11,366
    Likes Received:
    575
    Best Answers:
    4
    Trophy Points:
    385
    #4
    Yet another way, probably the laziest...

    <div align="center">
<div>content</div>
</div>
    Code (markup):
     
    Kerosene, May 15, 2009 IP
  5. irule272

    irule272 Well-Known Member

    Messages:
    1,153
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    155
    #5
    Hello I still cant get it can you guys pls. fix this here my css and html code.

    Css Code

    body{
    margin: 0 auto;
    padding: 0;
    background-image:url(../Image/bg.jpg);
    background-repeat:repeat-x;
    font-family:Verdana,Arial,Sans-Serif;
    font-size:90%;
    color:#ccc;
    text-align: center;
    }


    #MainDiv{
    background-color: #FFFFFF;
    height: 900px;
    width: 850px;
    margin-left: 70px;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 10px;
    border-style: none;
    }



    Html code:

    <body>
    <div id="MainDiv">

    divs inside
    contents

    </div>
    </body>



    What I want to center is the main div where my content is located.

    Thanks!
     
    irule272, May 15, 2009 IP
  6. ahabstein

    ahabstein Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Hello,

    You can use this style for the div id

    .idname {

    margin:0 auto;
    }
     
    ahabstein, May 15, 2009 IP
  7. Kerosene

    Kerosene Alpha & Omega™ Staff

    Messages:
    11,366
    Likes Received:
    575
    Best Answers:
    4
    Trophy Points:
    385
    #7
    Did you try my lazy method?

    <body>
    <div align="center">
    <div id="MainDiv">

    divs inside
    contents

    </div>
    </div>
    </body>
     
    Kerosene, May 15, 2009 IP
  8. autouch

    autouch Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I think the align attribute is deprecated
     
    autouch, May 15, 2009 IP
  9. pipes

    pipes Prominent Member

    Messages:
    12,766
    Likes Received:
    958
    Best Answers:
    0
    Trophy Points:
    360
    #9
    irule272, did you get this problem sorted?
     
    pipes, May 18, 2009 IP
  10. tentwenty

    tentwenty Well-Known Member

    Messages:
    1,030
    Likes Received:
    35
    Best Answers:
    0
    Trophy Points:
    110
    #10
    This is the way I do it. May be lazy but easy to remember for newbies.
     
    tentwenty, May 18, 2009 IP
  11. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #11
    Yes. Align is deprecated and newbies should not learn it.
     
    drhowarddrfine, May 18, 2009 IP
  12. matt-jones

    matt-jones Peon

    Messages:
    37
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #12
    or everything you want in the center in <center></center>

    who cares if its deprecated if people still use it the browsers will still render it
     
    matt-jones, May 18, 2009 IP
  13. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #13
    You mean like the 'layer' element? It was deprecated but I would hate to be one who learned and depended on it. There are lots of obsolete elements you can learn that could disappear on you with the very next version of any browser. I think 'marquee' doesn't work in IE8, for example.

    Do not learn and do not use deprecated elements.
     
    drhowarddrfine, May 18, 2009 IP
  14. Masim man

    Masim man Active Member

    Messages:
    73
    Likes Received:
    4
    Best Answers:
    2
    Trophy Points:
    58
    #14
    Or you can try this:

    <body>
    <div id="center">
    <div id="MainDiv">
    divs inside
    contents
    </div>
    </div>
    </body>

    CSS:
    #center{margin:0 auto;width:934px;}
    The width comes from: #MainDiv width+margin+padding.

    But for sure, your content won't exatly in the center because you applied the margin-left to the #MainDiv.
     
    Masim man, May 18, 2009 IP
  15. Xenomphile

    Xenomphile Member

    Messages:
    84
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #15
    wow...
    thanks...
    its help me alots
     
    Xenomphile, May 18, 2009 IP