3div in einem div zentrieren?!?!

[kismet]

hey ihr,

bin schon länger am tüfteln wie das gehen soll.

Habe ein div als Container der wiederum im inhalt drei div beinhaltet

die div im inhalt sollen einer ganz links einer ganz rechts und der andere mittig sein.

wie geht das ?
html--code

            <div class="ContainerPictures">
                <div class="Content">
                    <div class="Picture">
                    </div>
                    <h4>Station N2</h4>
                    <h4 class="normal">Bürgerhospital</h4>
                </div>
                <div class="Content">
                    <div class="Picture">
                    </div>
                </div>
                <div class="Content">
                    <div class="Picture">
                    </div>
                </div>
            </div>

css

/* 3er-Bild Container*/
.ContainerPictures
{
    float:left;
    width: 550px;
    height: 164px;
    border-bottom: solid 1px #BBB4A1;
    padding-left: 0px;
    padding-right: 0px;
    padding-left: auto;
}
/* Item Container */
.ContainerPictures .Content
{
    float:left;
    display: inline;
    width: 157px;
    height: 164px;
    padding-left: 0px;
    padding-right: 0px;
}
/*Picture in Item*/
.Picture
{
    margin: 14px 0px 0px 0px;
    float:left;
    width: 157px;
    height: 105px;
    background-color: Blue;
}
/* h4 - Schriftformatierung */
.ContainerPictures .Content h4
{
    display: inline;
    width: 152px;
    margin-top: 10px;
    margin-left: 5px;
    margin-bottom: 0px;
    text-align: left;
    float:left;
    font-family: Arial;
    font-size: 10px;
}
/*h4 - normale schrift */
.ContainerPictures .Content h4.normal
{
    margin-top: 0px;
    font-weight: normal;
}

hoffe doch mal jemand hat einen tipp oder ne idee

mfg
kismet

 

[Efchen]

Hallo,

der Container, der links stehen soll, bekommt "float:left", der der rechts stehen soll "float:right". Der mittlere erhält kein float.

Wichtig ist hierbei die Reihenfolge im HTML-Code: Erst die gefloateten Container (liks oder rechts ist egal), dann erst der, der nicht floatet.

Alternativ kann man auch alle drei in der selben Richtung floaten. Man kann es mit dem float aber auch übertreiben, vor allem, weil der IE da manchmal seltsame Effekte kreiert.

Gruß,
-Efchen

 

[kismet]

hmm das geht irgendwie nicht,

also nur teilweise

der eine geht zwar nach rechts aber der andere kommt nicht in die mitte??!?!?!

lg

p.s. danke für die schnelle antwort übrigens

 

[Efchen]

Wenn Du es so gemacht hast, wie ich das geschrieben habe, dann geht das eigentlich. Wie ist der Link zur Seite? Dann prüf ich das mal nach.

 

[kismet]

Leider ist die Seite nicht online.

            <div class="ContainerPictures">
                <div class="Content" style="float:left;">
                    <div class="Picture">
                    </div>
                    <h4>Station N2</h4>
                    <h4 class="normal">Bürgerhospital</h4>
                </div>
                <div class="Content" style="float:none;">
                    <div class="Picture">
                    </div>
                </div>
                <div class="Content" style="float:right;">
                    <div class="Picture">
                    </div>
                </div>
            </div>

habe in der css datei mal das float raus genommen. der hängt hier bei das mittlere div an das linke?!?!

 

[prm]

Vom Grundsatz her wie von Efchen beschrieben, hier das Grundgerüst:

<div style="width: 550px;">

    <div style="float: left; width: 157px; background: red;">Linksbox</div>

    <div style="float: right; width: 157px; background: green;">Rechtsbox</div>

    <div style="width: 157px; background: yellow; margin: 0 auto;">Mittelteil</div>

</div>

 

[kismet]

man man man ... wer lesen kann ist klar im vorteil....

ERST DIE GEFLOTETEN IM HTML UNTEREINANDER.....

bin selbst dran blöd.... danke vielmals habt mir sehr geholfen

lg
kismet

edit: doch zu früh gefreut im firefox macht das er aber in den ie's nicht.. sch.....
edit again: man man ich sollte mein code genauer durch lesen... war ein " zu viel

 

[prm]

Eins hab ich noch vergessen:
Vor dem Schließen des äußeren Containers solltest du noch clearen mit

<div style="clear: both;"></div>

 

[neuroleptika]

Oft enthält der mittlere Container den Hauptinhalt.
Dann ist es manchmal besser ihn im Quelltext vor den anderen Spalten zu notieren.
Dazu müsste der linke und mittige (oder rechte und mittige) Container zusammengefasst werden:

<div id="spalten">
<!--#linke Spalten#-->
<div id="spalte1_und_spalte2">
<div id="spalte1">
<h1>Inhalt</h1>
</div>
<div id="spalte2">
<h2>Nav1</h2>
</div>
<br class="clearer" />
</div>
<!--#Endelinke Spalten#-->
<div id="spalte3">
<h2>Nav2</h2>
</div>
<br class="clearer" />
</div>

#spalte1 und #spalte2 werden geflotet und und einer Box eingeschlossen.
Diese Box (#spalte1_und_spalte2) wird wiederum gefloatet.
Die letzte Box (#spalte3) erhält auch einen Float.
Alle Spalten werden durch ein weiteres clear im Elternelement (#spalten) eingeschlossen.
#spalten kann jetzt eine Grafik für (optisch) gleich lange Spalten tragen.

Suche: faux-columns

Beispiel: Spalten anordnen

Wenn die zuletzt notierten Spalten die Navigation enthalten, würde ich ein Sprungmenü anbieten.