Problem mit Anordnung von div's in einer Reihe

  • Ich habe mich dran gewagt einen Online Shop von seinem 960grid Outfit zu befreien und die Gestaltung mit css selbst zu übernehmen. Das funktioniert so weit ganz gut, aber jetzt hänge ich an einem "schwerwiegenden" Problem.
    Nach heraus filtern des php-Codes ergibt sich folgende div Konstellation:
    <body>
    <div id="header"></div>
    <div id="content"></div>
    <div id="column_left"></div>
    <div id="column_right"></div>
    <div id="footer"></div>
    </body>
    Ursprünglich war der Shop, wie die div Bezeichnungen schon vermuten lassen, so aufgebaut: header(oben), column_left(links), content(mitte), column_right(rechts), footer(unten),
    dadurch daß der content im html Dokument direkt nach dem header kommt, ist es mir nicht möglich die ursprüngliche Konstellation wiederherzustellen. Ich floate, span'e und tue. aber es klappt nicht.
    Da sich der content über 2 php Dateien erstreckt, ist es auch nicht möglich den content zwischen die zwei column div's zu stecken. Das hab ich probiert, dann hat aber der ganze Shop nicht mehr funktioniert.
    Das müßte doch irgendwie über css zu regeln sein? Gruß Ralph


    P.S. Mit absoluter Positionierung klappt das natürlich wunderbar, ich wollte es aber dynamisch flexibel halten! ;)

    Zum Spielen hab ich mal angelegt:


    <!DOCTYPE html>
    <html>
    <head>
    <title>Content in die Mitte floaten</title>
    <meta charset="UTF-8">

    <style type="text/css" rel="stylesheet">
    #wrapper
    {
    width: 900px;
    height: 200px;
    background-color: #cccccc;
    }
    #left
    {
    width: 300px;
    height: 200px;
    background-color: #FF0000;
    float: left;
    }
    #content
    {
    width: 300px;
    height: 200px;
    background-color: #000000;
    float: left;
    color: #FFF;
    }
    #right
    {
    width: 300px;
    height: 200px;
    background-color: #FFFF00;
    float: right;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="content">Content Mitte</div>
    <div id="left">Column Left</div>
    <div id="right">Column Right</div>
    </div>
    </body>
    </html>

  • Hatte ich auch gedacht! Wenn Du aber dem Content ein margin-left von 300px mit gibst, damit er in die Mitte rutscht, schiebt er automatisch die anderen zwei nach hinten und den letzten raus aus dem parent, da sie ja im Quellcode erst nach dem Content kommen,
    dann bringt es auch nichts denen noch ein float mitzugeben. z.B. left mit float left und margin-right 600px dann schiebt sich alles nach unten.

  • Das wird so nicht funktionieren. Wenn du nicht auf absolute Positionierung zurückgreifst, ordnen sich die Elemente nach der Reihenfolge im Quellcode an, entweder nach links oder nach rechst, je nachdem ob es ein float: right; hat oder nicht.
    Ich wüsste nichts, was daran etwas ändern würde. Das erste Element (in deinem Fall content), steht entweder links, rechts oder lässt gar keine Elemente neben sich zu.

  • Denke Du hast Recht Lauras,


    Durch die ungünstige Positionierung im Quellcode hat man keine Chance das so hinzubekommen. Wenigstens habe ich es jetzt geschafft den content div so zusammenzusetzen daß ich ihn zwischen die beiden column setzen konnte, ohne daß die Funktionalität des Shops gelitten hat. Aber die Umgestaltung scheint doch mehr komplizierter zu sein als ich dachte. Falls da jemand schon Erfahrungen mit gesammelt hat, oder vlt. sogar etwas helfen mag, darf sich gern per PN oder E-Mail bei mir melden. Macht ja dann vlt. auch mehr Spass. Zeitdruck habe ich keinen, mach das nur so, zum Lernen.


    Gruß Ralph

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!