XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   3 divs zentriert nebeneinander (http://xhtmlforum.de/showthread.php?t=56089)

StefanE 04.03.2009 12:16

3 divs zentriert nebeneinander
 
Hallo Kollegen -

ich habe folgenses Problem mit u.a. Code.

1. IE stellt mir die gesamte Seite nicht zentriert dar trotz margin-left: auto; und margin-right: auto;

2. Ich möchte die 3 divs (left, middle, right) im Content div nebeneinander, insgesamt zentriert, darstellen mit einem Abstand zum div middle von 10px.
Wie funktioniert das im IE und FF sauber ohne großartig mit Pixeln herunzurechnen?

Herzlichen Dank schonmal!

Code:

<html>
        <head>
                <title>Layout</title>
                <style type="text/css">
               
                * {
                        padding: 0em;
                        margin: 0em;
                        }

                body {
                        background: #FFFFFF;
                }

                #main {
                        background: #000000;
                        width: 800px;
                        margin-left: auto;
                        margin-right: auto;
                }

                #menu {
                        background: #CCC8B3;
                        height: 100px;
                        margin-bottom: 10px;
                        margin-left: 10px;
                        margin-right: 10px;
                }

                #header {
                        background: #F6F0E0;
                        height: 200px;
                        margin: 10px 10px 10px 10px;
                }

                #content {
                        background: #CFB59F;
                        margin: 10px 10px 10px 10px;
                }

                #left {
                        background: #BFBD93;
                        width: 243px;
                        height: 300px;
                        float: left;
                }

                #right {
                        background: #BFBD93;
                        width: 243px;
                        height: 300px;
                        float: right;
                }

                #middle {
                        background: #BFBD93;
                        width: 253px;
                        height: 300px;
                        margin-left: auto;
                        margin-right: auto;
                }

                #footer {
                        background: #CCC8B3;
                        height: 100px;
                        margin-left: 10px;
                        margin-right: 10px;
                        clear: both;
                }

                </style>
        </head>

        <body>
                <div id="main">
                        <div id="menu">
                                <p>menu</p>
                        </div>
                        <div id="header">
                                <p>header</p>
                        </div>
                        <div id="content">
                                <div id="left">
                                        <p>left</p>
                                </div>
                                <div id="right">
                                        <p>right</p>
                                </div>
                                <div id="middle">
                                        <p>middle</p>
                                </div>
                        </div>
                        <div id="footer">
                                <p>footer</p>
                        </div>
                </div>
        </body>
</html>


fricca 04.03.2009 12:25

Informier dich über den "Doctype Switch" und nimm den IE aus dem Quirksmodus.
Dann gibt's auch nicht mehr viel, was zu rechnen ist.


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:25 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023