[Solved] Centering the layout

[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)

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!

[TheDoc]

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

[JavaNova]

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

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

[TheDoc]

You have an extra closing div.

Code:

Also, take the width off of the body.

[JavaNova]

"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

[Author]

Posts