Grow your CSS skills. Land your dream job.

[Solved] Centering the layout

  • # July 28, 2009 at 2:41 pm

    Greetings CSS-Trickers! =)

    I regularly follow CSS-Tricks and this website has been useful in many ways. This is my first forum post, I hope someone can "throw me some bones" as I have tried literally all the options to center my layout, but for some unknown reasons (at least to me), the centering methods I used crippling the layout causing the website look ugly. I wish I could provide the link, but due to the nature of my work, I am compromised to do that.

    Long story sweet: The centering layout I knew was text-center the body in css, left aligning the floats inside the container. Didn’t work. Here is my snippet that I reverted to the previous and working version (left aligned)

    Code:
    body {
    background-color: #999999;
    font-size:12px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }

    #container {
    width:100%;
    margin:0 auto;
    max-width:850px;
    min-width:600px;
    }

    What other css centering methods do you know? How should I go about this? By the way, this is a theme layout for Drupal.

    Thanks so much!

    # July 28, 2009 at 3:34 pm

    You can’t have "width: 100%". Remove that and you should be fine.

    # July 28, 2009 at 4:00 pm
    "TheDoc" wrote:
    You can’t have "width: 100%". Remove that and you should be fine.

    Have tried. It’s not helping.

    Here is what I have for CSS:

    Code:
    body {
    font: normal normal normal 13px/23px Verdana, sans-serif;
    color:#444;
    background: #fff url(‘images/header.jpg’) no-repeat;
    border-right:thin;
    border-right-color:#000066;
    margin:0;
    max-width:850px;
    min-width:600px;
    text-align:center;
    }
    #container {
    margin:0 auto;
    max-width:750px;
    min-width:600px;
    }

    /*———-Header———-*/

    #header {
    height:215px;
    }

    /*———-Content and siderar———–*/
    #content {
    float:left;
    overflow:hidden;
    width:490px;
    border:#a4a7c0 solid 1px;
    padding: 10px 10px;

    }

    #sidebar_right {
    float:right;
    width:120px;
    padding:10px 10px;
    /*background-color: #dedede;*/
    background-color:#dedede;
    position:abosolute;
    }

    #sidebar_left {
    border-right:#333333 thin;
    float:left;
    width:190px;
    padding:0 0 0px 0;
    position:relative;
    }

    #sidebar_left .block {
    padding: 0 em;
    }

    #sidebar .title {
    color: #333333;
    margin:0;
    }

    #search {
    margin: -80px 0 0 18px;
    padding:0;
    position: absolute;
    float:right;
    }

    And here is my page.tpl:

    Code:

    < ?php if ($mission) { ?>
    < ?php print $mission ?>

    < ?php } ?>
    < ?php print $breadcrumb ?>

    < ?php print $title; ?>

    < ?php if (!empty($tabs)): ?>

    < ?php print $tabs; ?>

    < ?php endif; ?>
    < ?php print $help; ?>
    < ?php print $messages; ?>
    < ?php print $content_top; ?>
    < ?php print $content; ?>
    < ?php print $content_bottom; ?>
    < ?php print $feed_icons; ?>

    There is something that I am not pick up on. :(

    # July 28, 2009 at 4:33 pm

    You have an extra closing div.

    Code:

    Also, take the width off of the body.

    # July 28, 2009 at 4:50 pm
    "TheDoc" wrote:
    You have an extra closing div.

    Code:

    Also, take the width off of the body.

    TaDa! Extra div was the PROBLEM! Thank you so much! Why didn’t I pick up on this? :D

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

You must be logged in to reply to this topic.

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