Thema: div mittig zentrieren

HI!

Ich möchte meine seite zentrieren...

Da ich ausschließlich mit Containern arbeite, wollte ich die Standardlösung: margin:auto 0px; und IE: text-align:center; benutzen, aber es funktioniert nur im IE....

Habs auch schon mit der Variante 50% und - halbe breite usw. versucht aber dann zerlegt der IE die seite...

Hier nen link: Be welcomed to my page
hier der code:
styles.css:

Code:

body {
    text-align:left;
    font-size:12px;
    font-family: Arial, Helvetica, sans-serif;
}

a.inhalt:link { 
    color: rgb(125, 125, 125);
    text-decoration:none;
}

a.inhalt:visited {
    color: rgb(100, 100, 100);
    text-decoration:none
}

a.inhalt:hover {
    color: rgb(0, 125, 0);
    font-weight:bold;
}

a.inhalt:active {
    color: rgb(150, 150, 150);
}

.clearer {
    clear:both;
}

div#mittig {
    margin:auto 0px;
    width:1000px;
}

div#design {
    width: 1000px;
    height:700px;
    float:left;
    background-image:url('../images/design.jpg');
    background-repeat:no-repeat;
}

div#links {
    float:left;
    width:200px;
    height:700px;
}

div#mitte {
    float:left;
    width:600px;
    height:700px;
}

div#rechts {
    float:left;
    width:200px;
    height:700px;
}

div#welcome {
    width:200px;
    height:200px;
    background-image:url('../images/welcome.jpg');
    background-repeat: no-repeat;
}

div#menue {
    margin-top:0px;
    width:200px;
    height:500px;
    background-image:url('../images/menue.jpg')
}

div#header {
    width:600px;
    height:70px;
    background-image:url('../images/navleisteoben.jpg');
}

div#inhalt {
    width:600px;
    height:580px;
    background-image:url('../images/inhalt.jpg');
    background-repeat: no-repeat;
}

div#footer {
    width:600px;
    height: 50px;
    background-image:url('../images/footer.jpg');
    background-repeat:no-repeat;
}

div#logo {
    width:200px;
    height:200px;
    background-image: url('../images/logo.jpg');
    background-repeat:no-repeat;
}

div#news {
    width:200px;
    height:500px;
    background-image:url('../images/news.jpg');
    background-repeat:no-repeat;
}

div#content {
    overflow:auto;
    overflow-x:hidden;
    color:rgb(0, 255, 0);
    width:590px;
    height:570px;
    margin-left: 5px;
    padding-top:5px;
}

menue.css:

Code:

body {
    text-align:left;
    font-size:12px;
    font-family: Arial, Helvetica, sans-serif;
}

a.menue:link { 
    color: rgb(0, 125, 0);
    text-decoration:none;
}

a.menue:visited {
    color: rgb(50, 50, 50);
    text-decoration:none
}

a.menue:hover {
    color: rgb(0, 125, 0);
    font-weight:bold;
}

a.menue:active {
    color: rgb(150, 150, 150);
}

div#buttons {
    height:460px;
    width:183px;
    padding-top:20px;
    margin-left:8px;
}

div.buttonleer {
    width:183px;
    height:58px;
    background-image:url('../images/buttonleer.jpg');
    background-repeat:no-repeat;
}

div#buttonhome {
    width:183px;
    height:58px;
    background-image:url('../images/buttonhome.jpg');
    background-repeat:no-repeat;
}

div#buttonhomehigh {
    width:183px;
    height:58px;
    background-image:url('../images/buttonhomehigh.jpg');
    background-repeat:no-repeat;
}

div#buttonfroemmer {
    width:183px;
    height:58px;
    background-image:url('../images/buttonfroemmer.jpg');
    background-repeat:no-repeat;
}

div#buttonfroemmerhigh {
    width:183px;
    height:58px;
    background-image:url('../images/buttonfroemmerhigh.jpg');
    background-repeat:no-repeat;
}

div#buttonprivat {
    width:183px;
    height:58px;
    background-image:url('../images/buttonprivat.jpg');
    background-repeat:no-repeat;
}

div#buttonprivathigh {
    width:183px;
    height:58px;
    background-image:url('../images/buttonprivathigh.jpg');
    background-repeat:no-repeat;
}

div#buttonweb {
    width:183px;
    height:58px;
    background-image:url('../images/buttonweb.jpg');
    background-repeat:no-repeat;
}

div#buttonwebhigh {
    width:183px;
    height:58px;
    background-image:url('../images/buttonwebhigh.jpg');
    background-repeat:no-repeat;
}

div#topbuttonhome {
    float:left;
    width: 200px;
    height:70px;
    background-image:url('../images/topbuttonhome.jpg');
    background-repeat:no-repeat;
}

div#topbuttonhomehigh {
    float:left;
    width: 200px;
    height:70px;
    background-image:url('../images/topbuttonhomehigh.jpg');
    background-repeat:no-repeat;
}

div#topbuttonprivat {
    float:left;
    width: 200px;
    height:70px;
    background-image:url('../images/topbuttonprivat.jpg');
    background-repeat:no-repeat;
}

div#topbuttonprivathigh {
    float:left;
    width: 200px;
    height:70px;
    background-image:url('../images/topbuttonprivathigh.jpg');
    background-repeat:no-repeat;
}

div#topbuttonweb {
    float:left;
    width: 200px;
    height:70px;
    background-image:url('../images/topbuttonweb.jpg');
    background-repeat:no-repeat;
}

div#topbuttonwebhigh {
    float:left;
    width: 200px;
    height:70px;
    background-image:url('../images/topbuttonwebhigh.jpg');
    background-repeat:no-repeat;
}

index.php:

Code:

<html>
    <head>
        <title>Be welcomed to my page</title>
        <meta name="author" content="Jens Froemmer a.k.a. handymanjack">
        <meta name="generator" content="Adobe Go Live CS2">
        <link rel="stylesheet" href="styles.css">
        <link rel="stylesheet" href="menue.css">
        <script type="text/javascript" src="script.js"></script>
        <!-- ist aber alles von Hand programmiert und nicht per WYSIWYG xD -->
    </head>
<body bgcolor="black" align="center" style="margin:0;padding:0; height:100%; text-align:center;">
    <div id="mittig">
        <div id="links">
            <span class="clearer"></span>
            <div id="welcome"></div>
            <div id="menue">
                <div id="buttons">
                    <?
                        if(isset($_REQUEST['seite'])){
                            include "navigation.php";
                        }else{
                            include "menuehome.php";
                        }
                    ?>
                </div>
            </div>
        </div>
        <div id="mitte">
            <span class="clearer"></span>
            <div id="header">
                <div id="topbuttonhome" onmouseover="this.id='topbuttonhomehigh';" onmouseout="this.id='topbuttonhome';"></div>
                <div id="topbuttonprivat" onmouseover="this.id='topbuttonprivathigh';" onmouseout="this.id='topbuttonprivat';"></div>
                <div id="topbuttonweb" onmouseover="this.id='topbuttonwebhigh';" onmouseout="this.id='topbuttonweb';"></div>
                <span class="clearer"></span>
            </div>
            <div id="inhalt">
                <div id="content">
                    <?
                        if(isset($_REQUEST['seite'])){
                            include "seiten.php";
                        }else{
                            include "start.html";
                        }
                    ?>
                </div>
            </div>
            <div id="footer"></div>
        </div>
        <div id="rechts">
            <span class="clearer"></span>
            <div id="logo"></div>
            <div id="news"></div>
        </div>
    </div>
</body>
</html>

mfg
handymanjack