centering a full page

Yeodan · April 26, 2009

I've been searching for like two hours now and can't figure it out.

I just want to center my entire page, using divs, with css. I also want it to work in most browsers.

I've found sites that show you how it's done, but there's no explanation and it's too complicated to just copy it.

I've also found sites that show it, but when I try it it just doesn't work.

here's my css if that helps:

I've been trying to get it to work so there might be some strange things in it.

body {
background-color: #F5FFF5;
color: #000000;
    text-align: center;
}
TD {
FONT-FAMILY: Verdana, Arial;
FONT-SIZE: 9pt;
color: #000000;
}
A {
COLOR: #0000FF; TEXT-DECORATION: none;
}
A:hover {
COLOR: #6969FF; TEXT-DECORATION: none;
}
.input {
BACKGROUND-COLOR: #006600;
COLOR: #CCFFCC;
border-style: solid;
border-color: #66FF00;
FONT-FAMILY: Verdana, Arial;
FONT-SIZE: 9pt;
TEXT-DECORATION: none;
}


container {
    margin: 0 auto;
text-align: left;
}

#banner {
    left: 25px;
    top: 10px;
position: absolute;
}

#avatar {
left: 15px;
    top: 100px;
position: absolute;
}

#link {
    left: 25px;
    top: 375px;
position: absolute;
}

#news {
left: 200px;
    top: 100px;
    height: 171px;
    width: 370px;
    position: absolute;
    background-image: url("../images/testbg.png");
}

#update {
left: 588px;
    top: 100px;
    height: 171px;
    width: 100px;
    position: absolute;
    background-image: url("../images/testbg.png");
}

#main {
left: 200px;
    top: 365px;
    height: 50px;
    width: 100px;
position: absolute;
}

wildteen88 · April 26, 2009

Your site wont center because you're using absolute positioning.

Yeodan · April 26, 2009

okay so how do I define where my divs should be placed without using absolute positioning?

and I still don't know how to center my page

jackpf · April 26, 2009

Use relative/static positioning.

And you can center stuff by using text-align: center; and margin: 0 auto;

coalgames · April 26, 2009

Im guessing you got this theme from online.

If you want to be able to center it, you have to rewrite the whole thing.

TheFilmGod · April 26, 2009

Actually, you could center the page. I don't recommend using this technique. As absolute positioning is incorrect to center things!

Enclose all your contents within a div called - "html-center"

<body>

.......... all your body contents

</div>

</body>

In your css:

#html-center {

width: (-specify width-)px; /* like - width: 800px; */

margin: 0 auto;

position: relative;

}

There you go! It'll center;

popcornplya · April 27, 2009

Actually, you could center the page. I don't recommend using this technique. As absolute positioning is incorrect to center things!

Enclose all your contents within a div called - "html-center"

<body>

<div id="html-center">

.......... all your body contents

</div>

</body>

In your css:

#html-center {

width: (-specify width-)px; /* like - width: 800px; */

margin: 0 auto;

position: relative;

}

There you go! It'll center;

That will only center it for Firefox, Opera, etc. but not IE

to center in IE just add

text-align:center;

to body then in the #html-center reset it with

text-align:left;

wildteen88 · April 27, 2009

Actually, you could center the page. I don't recommend using this technique. As absolute positioning is incorrect to center things!

Enclose all your contents within a div called - "html-center"

<body>

<div id="html-center">

.......... all your body contents

</div>

</body>

In your css:

#html-center {

   width: (-specify width-)px; /* like - width: 800px; */

   margin: 0 auto;

   position: relative;

}

There you go! It'll center;

That will only center it for Firefox, Opera, etc. but not IE

to center in IE just add
text-align:center;
to body then in the #html-center reset it with
text-align:left;

You are wrong. It will work fine in IE if you set a valid DOCTYPE.

TheFilmGod · April 27, 2009

Actually you both are right. IE5 and lower will not center "margin: 0 auto;" unless you use a "text-align: center;"

IE6+ will center margin: 0 auto; if you set a valid doctype.

Sign In

centering a full page

Recommended Posts

Yeodan

Link to comment

Share on other sites

wildteen88

Link to comment

Share on other sites

Yeodan

Link to comment

Share on other sites

jackpf

Link to comment

Share on other sites

coalgames

Link to comment

Share on other sites

TheFilmGod

Link to comment

Share on other sites

popcornplya

Link to comment

Share on other sites

wildteen88

Link to comment

Share on other sites

TheFilmGod

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information