Forums

JavaNova

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)


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!

TheDoc

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

JavaNova

"TheDoc" said:
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:


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:


<body>
    <div id=\"container\">
      <div id=\"header\">
        <div id=\"search\">
    
        </div></div>
        <div id=\"nav\">
          <?php if (isset($primary_links)) : ?>
          <?php print theme('links', $primary_links) ?>
          <?php endif; ?>
        </div>
      </div>
      <div id=\"sidebar_left\">
          
          <?php print $left; ?>
        </div>
      <div id=\"content\">
        <?php if ($mission) { ?><div class=\"mission\"><?php print $mission ?></div><?php } ?>
        <?php print $breadcrumb ?>
        <h1><?php print $title; ?></h1>
        <?php if (!empty($tabs)): ?>
        <div class=\"tabs\"><?php print $tabs; ?></div>
        <?php endif; ?>
        <?php print $help; ?>
        <?php print $messages; ?>
        <?php print $content_top; ?>
        <?php print $content; ?>
        <?php print $content_bottom; ?>
        <?php print $feed_icons; ?>
      </div>
        <div id=\"sidebar_right\">
          <?php print $right; ?>
        </div>
      </div>
    <div id=\"footer\">
      
        <?php print $footer_message; ?>
        <?php print $footer; ?>
      
	
    </div>
  </body>

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

TheDoc

You have an extra closing div.

<div id=\"nav\">
              <?php if (isset($primary_links)) : ?>
              <?php print theme('links', $primary_links) ?>
              <?php endif; ?>
            </div><!--closenav-->
          </div><!--oh noes, I'm closing the container-->

Also, take the width off of the body.

JavaNova

"TheDoc" said:

You have an extra closing div.

<div id=\"nav\">
              <?php if (isset($primary_links)) : ?>
              <?php print theme('links', $primary_links) ?>
              <?php endif; ?>
            </div><!--closenav-->
          </div><!--oh noes, I'm closing the container-->

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

treehouse : what would you like to learn today?

Forums

[Solved] Centering the layout