CSS Zentrierung ( "float:center" )

PeetG · 05.05.2009

Hi,

ich arbeite mich gerade in CSS ein, Anfänger sozusagen und bin dabei auf folgendes Problem gestoßen.
Die Layout sieht derzeit so aus:

(div-Bereiche farblich unterlegt)

Dieses soll mit float gestaltet werden, links und rechts sind statische Spalten und in der Mitte soll (wenn's geht) dynamisch werden. Jetzt klebt mir aber der mittlere Bereich oben-rechts in der Ecke.
Das blaue/rote Feld soll möglichst den ganzen mittleren Bereich ausfüllen und zentriert sein (die Grafik natürlich auch). Das will und will aber nicht klappen, denn float:center gibt's anscheinend nicht.

Hier der Code dazu:

HTML:

<body><div id="table">

    <div id="head">
       <div class="line">TEXT</div>
    </div>
    
    <div id="right">TEXT</div>
    
    <div id="mid">
        <div id="mid-inside">
            <img src="Buch.gif" />
        </div>
    </div>
    
    <div id="left">TEXT</div>
    
    <div id="foot">
       <div class="line">TEXT</div>
    </div>
    
</div></body>

HTML:

body 
{
    background-color: #FFCC00;
}

#table {
    width: 1152px;
    height: 864px;
    margin:auto;
}

#head {
    background-color:#663399;     /*ändern*/
     border: none;
    padding: 0; 
    margin: 0; 
    width: 100%; 
    margin: auto;
    overflow: auto;
}

#left {
    background-color:#00FF00;
     border: none;
    padding: 0;
    margin: 0;
    width: 200px;
    height: 720px;
    float: left;
    overflow: auto;
}

#mid {
    background-color:#0000FF;
    padding: 0;
    border: none;
    margin: 0 auto;
    float: right;
    overflow: auto;
}
#mid-inside {
    background-color:#FF0000;
    padding: 0;
    border: 1px solid #fc0;
    margin: 20px;
}

img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto 
}

#right {
    background-color:#00FF00;
     border:none;
    width: 200px;
    height:720px;
    float: right;
    overflow: auto;
    margin: 0;
}

#foot {
    background-color:#663399;  
    border:none;
    padding: 0; 
    margin: auto; 
    width: 100%;
    overflow: auto; 
    clear: both; 
}

Was mache ich falsch ? Kann mir da jemand weiterhelfen ?

Grüße Peet

MIB101 · 05.05.2009

AW: CSS Zentrierung ( "float:center" )

Hey

Ja hast recht, "Float:center;" gibts nicht.
Um DIV-Container zu zentrieren, musst du
" margin: 0 auto; "
eingeben.
Damit müsste es gehen!

PeetG · 05.05.2009

AW: CSS Zentrierung ( "float:center" )

so einfach schein es eben nicht zu sein, denn wenn du genau hinschaust steht das zumindest bei #mid schon drin oder vlt. hab ich auch was drin stehen, was die zentrierung wieder aufhebt ? mir fällt zumindest nichts auf ... ?

Doitsu · 05.05.2009

AW: CSS Zentrierung ( "float:center" )

Wenn du mit float arbeitest bringt dir margin:auto nix..
Du koenntest mit position:absolute; left/top in % und margin -xx px arbeiten..

leohh · 05.05.2009

AW: CSS Zentrierung ( "float:center" )

Wieso soll der mittlere Teil eigentlich zentriert werden...
Wo ist die Logik dahinter, wenn ich mit einem multi-colum layout arbeite, in dem die mittlere spalte immer 100% des zur verfuegung, stehenden Platzes einnehmen soll, diese auch noch mittig zu positionieren..

Erschliesst sich mir gerade nicht so wirklich ...

hellemon · 05.05.2009

AW: CSS Zentrierung ( "float:center" )

Hier hast du die Anleitung zu genau deinem Layout

Cascading Style Sheets { CSS-Layouts mit Hilfe von position : Beispiel 18 }

http://www.thestyleworks.de/tut-art/layout_div.shtml

Gruß hellemon