Hey everyone, I'm a bit new still at html and css. I'm having a bit of a problem with the positioning of my main content. It won't be centered. I've used a background container to try to manage it and I can't, for the love of god, get it to the center of my screen. When I used <center> </center> it worked just fine but on m other computer the positioning was way off. I took that element out and now it's just stuck to the left still. I'm probably missing something wrong but if someone can look at it or tell me what I'm doing wrong, I'd appreciate it.

I'm using FireFox by the way and here's the code to my html and css files:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Title</title>
<link href="tCss/main original.css" rel="stylesheet" type="text/css" />
<link href="tCss/navigation.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.png" />

</head>

<body>

<div id="totalpos">

<!-- ////////////////////////////////////////////////// -->

<!-- Header -->

    <div id="Headerpos">
        <img src="images/weblogo.png">
    </div>

<!-- End of Header -->

<!-- ////////////////////////////////////////////////// -->

<!-- Navigation Bar -->

    <div id="Nav">
        <div class="Home">
            <a href="index.php">
                <img src="images/Home2.png">
            </a>
        </div>

        <div class="About">
            <a href="#">
                <img src="images/About.png"
                onmouseover="this.src='images/About2.png'"
                onmouseout="this.src='images/About.png'">
            </a>
        </div>

        <div class="Projects">
            <a href="#">
                <img src="images/Projects.png"
                onmouseover="this.src='images/Projects2.png'"
                onmouseout="this.src='images/Projects.png'">
            </a>
        </div>

        <div class="Apply">
            <a href="#">
                <img src="images/Apply.png"
                onmouseover="this.src='images/Apply2.png'"
                onmouseout="this.src='images/Apply.png'">
            </a>
        </div>

        <div class="FAQ">
            <a href="#">
                <img src="images/FAQ.png"
                onmouseover="this.src='images/FAQ2.png'"
                onmouseout="this.src='images/FAQ.png'">
            </a>
        </div>

        <div class="Contact">
            <a href="#">
                <img src="images/Contact.png"
                onmouseover="this.src='images/Contact2.png'"
                onmouseout="this.src='images/Contact.png'">
            </a>
        </div>
    </div>

<!-- End of Navigation Bar -->

<!-- ////////////////////////////////////////////////// -->

<!-- Main Content -->

    <div id="Mainpos">

        <div id="LeftCT">

        </div>

        <div id="RightCT">

        </div>

    </div>

<!-- End of Main Content -->

<!-- ////////////////////////////////////////////////// -->

<!-- Footer -->

    <div id="Footerpos">
        <div class="tgiflogo">
            <img src="images/footerlogo.png">
        </div>
        <div class="copy">
            Copyright &copy
        </div>
    </div>

<!-- End of Footer -->

</div>

</body>

</html>

and here's the css..

body
{
    background: #000 url('../images/Mockup2.png') no-repeat center;
    margin: 0 auto;
    padding: 0;
    width: 1900px;
    height:1114px;
}

#wrapper
    /*background: url('../images/BGs/total bg.png') no-repeat center;*/
    width: 1000px;
    height: 1114px;
    left: 1px;
}

#Header
{

    /*background: #fff url('../images/BGs/header bg.png') no-repeat center;*/
    width: 1000px;
    height: 140px;
    top: 7px;
    left: 1px;
        float:left;

}


#Nav
{

    /*background: #fff url('../images/BGs/nav bg.png') no-repeat center;*/
    width: 1000px;
    height: 40px;
    top: 7px;
    left: 1px;
        float:left;

}


#Main
{

    /*background:url('../images/BGs/main ct.png') no-repeat center;*/
    width: 1000px;
    height: 670px;
    top: 7px;
    left: 1px;
        margin: 0 auto;

}

#Left
{

    /*background:url('../images/BGs/left ct.png') no-repeat;*/
    float: left;
    width: 750px;
    height: 670px;

}

#Right
{

    /*background-image:url('../images/BGs/right ct.png');*/
    background-repeat: no-repeat;
    float: left;
    position: relative;
    width: 250px;
    height: 670px;

}

#Footer
{

    /*background:url('../images/BGs/footer bg.png') no-repeat center;*/
    width: 1000px;
    height: 250px;
    top: 14px;
    left: 1px;
    clear:left;

}

.tgiflogo
{
    position: relative;
    float: left;
    padding-top: 25px;
    padding-left: 15px;
        z-index:100;

}

.copy
{
    position: relative;
    float: left;
    padding-top: 25px;
    padding-left: 15px;
    color: #ffffff;
    font-size: 12px;
    top: 10px;
}

To center a div, simply apply a width and margin property in yor style sheet. For example:

'#wrapper {width:1000px;margin:0px auto;}'

Once you set a width and instruct the browser to auto set the left and right margin, it will center horizontally. I do not recommend the use of the center tag. It's obsolete in HTML5 and deprecated for HTML 4.01.

I just put that in there and tried but to no avail. For some reason it just won't budge even with that code. Thanks for the reply though

You have #Main in your CSS but <div id="Mainpos"> in your HTML, your class and id names need to match what you have in your styelsheet, therefore it should be <div id="Main">

Is it correct... i try this code but no result found

Oh shoot, I forgot about those, I had another css file I tried to work with. Anyway I fixed the names of my ids and classes so they correspond to the ones in my index file. But for some reason, my main content is centered but my header, nav bar, and footer are still stuck to the left side. I'll repost code if anyone wants to see it as of now:

index:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>TGIF - SFSU</title>
<link href="tCss/main.css" rel="stylesheet" type="text/css" />
<link href="tCss/navigation.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.png" />

</head>

<body>

<div id="totalpos">

<!-- ////////////////////////////////////////////////// -->

<!-- Header -->

    <div id="Headerpos">
        <img src="images/weblogo.png">
    </div>

<!-- End of Header -->

<!-- ////////////////////////////////////////////////// -->

<!-- Navigation Bar -->

    <div id="Nav">
        <div class="Home">
            <a href="index.php">
                <img src="images/Home2.png">
            </a>
        </div>

        <div class="About">
            <a href="#">
                <img src="images/About.png"
                onmouseover="this.src='images/About2.png'"
                onmouseout="this.src='images/About.png'">
            </a>
        </div>

        <div class="Projects">
            <a href="#">
                <img src="images/Projects.png"
                onmouseover="this.src='images/Projects2.png'"
                onmouseout="this.src='images/Projects.png'">
            </a>
        </div>

        <div class="Apply">
            <a href="#">
                <img src="images/Apply.png"
                onmouseover="this.src='images/Apply2.png'"
                onmouseout="this.src='images/Apply.png'">
            </a>
        </div>

        <div class="FAQ">
            <a href="#">
                <img src="images/FAQ.png"
                onmouseover="this.src='images/FAQ2.png'"
                onmouseout="this.src='images/FAQ.png'">
            </a>
        </div>

        <div class="Contact">
            <a href="#">
                <img src="images/Contact.png"
                onmouseover="this.src='images/Contact2.png'"
                onmouseout="this.src='images/Contact.png'">
            </a>
        </div>
    </div>

<!-- End of Navigation Bar -->

<!-- ////////////////////////////////////////////////// -->

<!-- Main Content -->

    <div id="Main">

        <div id="Left">

        </div>

        <div id="Right">

        </div>

    </div>

<!-- End of Main Content -->

<!-- ////////////////////////////////////////////////// -->

<!-- Footer -->

    <div id="Footer">
        <div class="tgiflogo">
            <img src="images/footerlogo.png">
        </div>
        <div class="copy">
            Copyright © 2012-2013 | All Rights Reserved.
        </div>
    </div>

<!-- End of Footer -->

</div>

</body>

</html>

and the main.css

body
{
    background: #000 url('../images/Mockup2.png') no-repeat center;
    margin: 0 auto;
    padding: 0;
    width: 1900px;
    height:1114px;
}

#wrapper
    background: url('../images/BGs/total bg.png') no-repeat center;
    width: 1000px;
    margin: 0px auto;
    height: 1114px;
    left: 1px;
}

#Header
{

    background: #fff url('../images/BGs/header bg.png') no-repeat center;
    width: 1000px;
    height: 140px;
    top: 7px;
    left: 1px;

}


#Nav
{

    background: #fff url('../images/BGs/nav bg.png') no-repeat center;
    width: 1000px;
    height: 40px;
    top: 7px;
    left: 1px;

}


#Main
{

    background:url('../images/BGs/main ct.png') no-repeat center;
    width: 1000px;
    height: 670px;
    top: 7px;
    left: 1px;
        margin: 0 auto;

}

#Left
{

    /*background:url('../images/BGs/left ct.png') no-repeat;*/
    float: left;
    width: 750px;
    height: 670px;

}

#Right
{

    /*background-image:url('../images/BGs/right ct.png');*/
    background-repeat: no-repeat;
    float: left;
    position: relative;
    width: 250px;
    height: 670px;

}

#Footer
{

    background:url('../images/BGs/footer bg.png') no-repeat center;
    width: 1000px;
    height: 250px;
    top: 14px;
    left: 1px;
    clear:left;

}

.tgiflogo
{
    position: relative;
    float: left;
    padding-top: 25px;
    padding-left: 15px;
        z-index:100;

}

.copy
{
    position: relative;
    float: left;
    padding-top: 25px;
    padding-left: 15px;
    color: #ffffff;
    font-size: 12px;
    top: 10px;
}

Hey nevermind I got that much fixed, I was missing a { in my css. But now I'm back where I was when I originally started way before, when I first started the website. When i used the margin 0 auto; it centered out just nicely. But when I uploaded it to an ftp server just to test it out, it was perfect. But on my laptop it's back to where it's not centered, but space towards the right I donno if you guys can see it here: http://tgif.zxq.net/rtest/

edit: just tested it on my parents computer:
IE: whole body is moved rightward just like on my laptop (which, on my laptop i was using Firefox)
Chrome: Centered but the background was moved slightly upward hiding approx 50px of the topside of my background, leaving 50px worth of whitespace at the bottom
FireFox: Just like on my computer here, everything is perfect =(

Someone please help me!

Never mind got it fixed, had to change a few things in my wrapper and body and a few other things. Tested it out on 2 diff characters and it seems to position nicely. For some reason on Chrome though when I tested it out, there was like 25px of whitespace at the bottom. Don't know how to get rid of that

I have just looked at the link you posted before on Chrome (Mac) and cannot see any whitespace - should I be looking at a different link?

That's weird but no, I checked it on IE and MFF and nothing but on that Chrome yesterday I saw space. Anyway, yeah this is the link right now : http://tgif.zxq.net/rtest/

Updated it about 4 hours ago. So I think the positioning is fine now, hopefully no whitespace when people from different res computers look at it! >_<

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.