Grow your CSS skills. Land your dream job.

Center Website with Div Tag

  • # December 26, 2010 at 11:21 am

    Hi, I am unable to center the container div. I am new to CSS and would appreciate the help.
    Right now the website is shifted to the far lefft in most resolutions.

    }
    #apDiv7 {
    position:absolute;
    width:832px;
    height:529px;
    z-index:6;
    left: 93px;
    top: 27px;
    background-image: url(align.jpg);
    overflow: visible;
    visibility: visible;
    }

    # December 26, 2010 at 12:33 pm

    Create a centering reset. Copy this entire code and paste in the top of your CSS file.

    * {margin: 0 auto; padding: 0;}
    # December 26, 2010 at 1:31 pm

    Please don’t create a centering reset…. that is not a good idea!

    You want to remove the top, left and position attributes of the container div and set the margin to

    margin: 0 auto
    # December 26, 2010 at 3:52 pm

    Why is creating a reset a bad idea? Tons of people use them including Chris Coyier and Elliot Jay Stocks.

    Edit: Actually, you’re right as it may throw off the rest of his design. However, if he used a reset in the beginning, he most likely wouldn’t have this issue.

    # December 26, 2010 at 4:56 pm

    @CWDESIGN * {margin: 0 auto; padding: 0;} isn’t a very common reset, * {margin: 0; padding: 0;} is however.

    # December 26, 2010 at 5:31 pm

    @jamy-za, but it works.

    # December 26, 2010 at 5:46 pm

    A centering reset usually isn’t good.

    # December 27, 2010 at 1:00 am

    try to remove he absolute positionning and top and left attribute, then make the margin: 0 auto.That should fix your problem and for IE add this for the body {text-align:center} and the container div add this {text-align:left}.
    Let us know if works for you

    # December 27, 2010 at 6:37 am

    Firstly, a centering reset is a terrible idea when all the original poster wanted was to center one div. It makes no sense to go and center everything when all they asked for was the container to be centered!

    Also, with regards to the above poster, you do not need any text-align for IE unless you are actually wanting to center the text within the div rather than just center the div on the page

    # December 27, 2010 at 6:55 am

    Lol everyone is so high strung on these forums. Chill. Wouldn’t it be easier if we just had a link in the first place? Maybe my suggestion wasn’t a good idea in the short run but would save a lot of time in the future and there’s nothing wrong with a center reset

    # December 27, 2010 at 8:04 am

    I’m not highly strung, I’m just here to try and prevent people from giving out poor advice.

    A centering reset is not a good idea and would also not save a lot of time in the future unless you actually wanted to center every single element on your site. Having a regular reset, as @jamy_za pointed out, is not a problem (although there are also arguments for why these are bad…but that is another discussion!) but the command

    * { margin: 0 auto }

    centers everything, including divs within their parent div, paragraphs, images etc etc. If you wanted to center every element within its parent (or have the majority of elements like this), then sure, use a centering reset, but I highly doubt many people would and it would therefore be quicker (both coding and for the browser to actually parse the information) if you just centered the few elements that needed centering

    # December 27, 2010 at 8:16 am

    You’re absolutely right.

    # December 27, 2010 at 12:07 pm

    What I would do to center a Div absolutely is:


    #divselector {margin:0px auto; width:800px;}

    And if for some reason that doesn’t work. You could always try:


    #divselector {position:absolute; left:50%; width:800px; margin-left:-400px;}

    You absolutely position it in the center by giving in a negative margin of half the total width.

    (I’m assuming in this example that the div is 800px wide)

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".