Css help - to widen and center a website

[fernyburn]

Hi
I have a free css template that is fixed width, I want it to be about 900 pixels wide, but im having problems with the css code

when i change the wrapper or border pixel amount the template goes over to the right of the screen
I want it to be centered

Ive tried margin 0 - but it doesnt seem to work

can any one help

code below

* {
 padding: 0;
 margin: 0;
}
body {
 font-family: Arial, Helvetica, sans-serif;
 color: #666666;
 font-size: 12px;
 background-image:url(images/bg-tile.gif);
 background-repeat:repeat;
}
#wrapper {
 width: 782px;
 margin: 0 auto;
}
#border {
 border: 1px solid #8ECE5F;
 margin: 20px 0px 5px 0px;
 background-color: #fffffe;
 min-height: 776px;
 float: right;
 width: 780px;
}
* html #border {height:776px} /* IE Min-Height Hack */ 

#header {
 margin: 6px 5px 3px 5px; 
 background-image:url(images/header.jpg);
 background-repeat:no-repeat;
 height:140px;
}

#headertext
{
    width:180px;
    height:40px;
    font-family:"Trebuchet MS";
    font-size:33px;
    color:#71c15c;
    margin:50px 0px 0px 50px;
    float:left;
    clear:none;
}

#headertextsmall
{    
    width:250px;
    height:30px;
    font-family:"Trebuchet MS";
    font-size:20px;
    color:#fff;            
    padding-right:50px;
    padding-top:60px;
    float:right;
    
}

/* ------------------------ Start Navigation Bar -----------------*/
#topmenu
{
height:46px;
width: 770px;
padding-left:5px;
background-repeat:no-repeat;
}

/*MEUNU*/
.glossymenu{
    position: relative;
    padding: 0 0 0 34px;
    margin: 0 auto 0 auto;
    background: url(images/menug_bg.gif) repeat-x; /*tab background image path*/
    height: 46px;
    list-style: none;
}

.glossymenu li{
    float:left;
}

.glossymenu li a{
    float: left;
    display: block;
    color:#000;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
    height: 46px;
    line-height: 46px;
    text-align: center;
    cursor: pointer;    
}

.glossymenu li a b{
    float: left;
    display: block;
    padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
    color: #fff;
    background: url(images/menug_hover_left.gif) no-repeat; /*left tab image path*/
    background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
    
    background: url(images/menug_hover_right.gif) no-repeat right top; /*right tab image path*/
}

/* ------------------------ End Navigation Bar -----------------*/


/* ------------------------ Start Images -----------------*/
img {
 display: inline;
 border: none;
}
img.block {
 display: block;
}
img.float {
 float: left;
 margin: 0px 14px 10px 0px;
}
/* ------------------------ End Images -----------------*/


/* ------------------------ Start Main Columns -----------------*/
#leftcolumn { /* Parent Wrapper for inside boxes */
 margin: 6px 0px 0px 4px;
 display: inline; /* IE Hack */
 width: 240px;
 float: left;
 background-image:url(images/search-box.gif);
 background-repeat: no-repeat;
 min-height: 300px;
 padding: 0;

}
* html #leftcolumn {height:300px} /* IE Min-Height Hack */

.leftcolumn-inner { /* Parent Wrapper for inside boxes */
 display: inline; /* IE Hack */
 width: 220px;
 float: left;
 background-image:url(images/search-box.gif);
 background-repeat: no-repeat;
 min-height: 40px;
 padding: 10px;
 margin-bottom: 7px;
}
* html .leftcolumn-inner {height:40px} /* IE Min-Height Hack */

.in-the-news { /* Parent Wrapper for inside boxes */
 display: inline; /* IE Hack */
 width: 235px;
 float: left;
 min-height: 125px;
 margin-bottom: 7px;
}
* html .in-the-news {height:125px} /* IE Min-Height Hack */


#rightcolumn {
/* border: 1px solid red;*/
 margin: 6px 0px 0px 0px;
 display: inline; /* IE Hack */
 width: 513px;
 float: left;
 min-height: 300px;
}
* html #rightcolumn {height:300px} /* IE Min-Height Hack */ 

#highlightnews {
 background-image:url(images/highlightnews.jpg); 
 height:auto;
 background-repeat: no-repeat;
 text-align: left;
 padding: 17px 10px 10px 13px;
 display: inline; /* IE Hack */
 float: left;
 width: 510px; 
}


#highlightnews img
{
    float:left;
    padding-right:10px;    
}

* html .sponsor {height:80px} /* IE Min-Height Hack */

.maincontent {
 min-height: 80px;
 display: inline; /* IE Hack */
 float: left;
 margin-bottom: 7px;
 width: 530px;
}
* html .maincontent {height:80px} /* IE Min-Height Hack */

.content-mid {
 background-image:url(images/content-mid.gif);
 background-repeat: repeat;
 padding: 5px 14px 5px 14px;
}
.content-mid img
{
    float:left;
    margin:3px 10px 14px 0px;
}
.left-mid {
 background-image:url(images/left-mid.gif);
 background-repeat: repeat;
 padding: 5px 14px 10px 14px;
}
.randompicture
{
background-image:url(images/left-mid.gif);
background-repeat: repeat;
text-align:center;
padding:5px 0px 5px 0px;
overflow:hidden;    
}

.left-heading {
 background-image:url(images/left-heading.gif);
 background-repeat: no-repeat;
 padding: 9px 14px 5px 10px; 
}
.left-heading h3
{
    font-size: 16px;
 color: #fff;
 min-height: 11px;
 font-weight: bold;
}

* html .left-heading {height:11px} /* IE Min-Height Hack */
/* ------------------------ End Main Columns -----------------*/

/* ------------------------- Start Headings ---------------------*/
h1 {
 font-size: 16px;
 color: #72C236;
}
/* ------------------------- End Headings ---------------------*/

input {
 border: 1px solid #8ECE5F;
 width: 200px;
}



#footer {
 font-size: 10px;
 clear: both;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 margin-bottom: 5px;
 text-align:center;
}


ul#daily-links li {
 list-style: none;
 margin-left: 2px;
}
ul#nav-links li {
 display: inline;
 margin-left: 0px;
 padding-left: 12px;
 
}

ul#daily-links li a:link{
 color: #333;
 text-decoration: none;
 font-weight: bold;
}
ul#daily-links li a:visited{
 color: #333;
 text-decoration: none;
 font-weight: bold;
}
ul#daily-links li a:hover{
 color: #999;
 text-decoration: none;
 font-weight: bold;
}




a:link {
 color: #006600;
 text-decoration: none;
}
a:visited {
 color: #006600;
 text-decoration: none;
}

.valid {
 margin: 10px 0px 0px 10px;
}

thanks

[Stomme_poes]

This way the wrapper will be realy centered and the width for the wrapper indeed to 900px.

Only in IE. text-align: center cannot center blocks in modern browsers. Automargins will center blocks in modern browsers and IE, so long as IE sees a complete doctype and doesn’t fall into Quirks Mode.

[Stomme_poes]

The reason you’ll see both together for IE is, if IE is in Quirks Mode (bad or no doctype) then you HAVE to use the text-align to center blocks… because it’s acting like IE5 at that point. It ignores automargins, and especially on sites where either they were built when IE6 was new (and also the concept of a doctype), or sites written to support IE5, you’ll see both.

body {
text-align: center; centers the next block child for IE5
}

#wrapper {
width: something;
margin: 0 auto;
text-align: left; prevents all browsers from also centering the text
}

and this is traditionally how you’d get your page centered in all browsers including IE5, who doesn’t understand automargins.

I’ve got pages doing that, but I don’t write new ones to support IE5 anymore.

[donboe]

You’re probably right I think it’s old IE hack habbit. I indeed use it in combination with margin 0 auto; so I guess for IE it’s working and the other browser simply use the other rule.

Bedankt anyway for the explanation

[Stomme_poes]

Try it in Firefox (or Opera or Chrome or Safari or whatever). If your box is centered there too, then someone’s got automargins (or enough side margins that, on your screen, seem to make it look centered). But none of those browsers will respond to text-align for blocks.

I dunno why IE did that initially… I think the current IEs do it for backwards compatibility or something.

[donboe]

Only in IE. text-align: center cannot center blocks in modern browsers. Automargins will center blocks in modern browsers and IE, so long as IE sees a complete doctype and doesn’t fall into Quirks Mode.

It works fine for me as far as I can see, but anyway never to old to learn

[Stomme_poes]

You should add text-align:center into the body CSS. The result as below:

Only centers inlines, not blocks, except in IE.

[lqyromeo]

You should add text-align:center into the body CSS. The result as below:

{
font-family: Arial, Helvetica, sans-serif;
color: #666666;
font-size: 12px;
background-image:url(images/bg-tile.gif);
background-repeat:repeat;
text-align:center;
}

Hope this could help you.

[donboe]

The css is incomplete. First of I would add text-align: center; to the body tag, and text-align: left; to the wrapper. This way the wrapper will be realy centered and the width for the wrapper indeed to 900px. Furthermore to make the make the height cross browser working without IE hack simply have this in the border rule: min-height: 776px; height: auto !important; height: 776px;

I don’t understand the border floating right, but I haven’t seen the template . Like stomme poes already said you need to change the width from the border accordingly so when you set the wrapper to 900px than you should change the border width to 898px;

[johnny_dacu]

Hmmm if you’ll share the html code too. I’m guessing the markup.

[Stomme_poes]

First, hit the little yellow flag on the bottom left of your post, so you can tell a mod to edit your post and wrap all that code inside [code] tags : )

Second, you’ll need to change the width on #wrapper to the 900-whatever you want, and then ALSO change the width on #border to the same— the reason the site goes to the right if you just widen #wrapper is because inside it is #border, who still has the old 700-whatever width (so, smaller) and for some reason it’s floated right?? Dunno why, but as soon as its container is wider than it, you’ll be able to see it hugging the right edge. Making it just as wide as wrapper will remove that look.