KingOfRap: 3 Spalten Layout mit fester Breite in Mitte

Nabend zusammen,

bin echt verzweifelt. Suche den ganzen Tag schon nach einer Lösung.
Ich möchte ein 3 Spalten Layout mit divs machen mit dem Befehl float.
Eigentlich klappt es auch immer nur möchte ich dass der mittlere Container genau mittig am Bildschirm ist egal wie breit dieser ist und er sollte eine feste Breite haben (800px).

Hoffe ihr könnt mir helfen.

P.S. Die mittlere Spalte soll dann die Hauptseite werden also da müssen auch noch mehrer divs rein aber das sollte ja eh kein Problem sein.

  1. Hallo!
    Und wo ist das Problem?
    Dem mittleren Container einfach (min-)width 800px geben und zentrieren.
    Links und rechts halt 2 andere Container floaten lassen.

    --
    LG,
    Snafu
    1. Hallo!
      Und wo ist das Problem?

      Das wie

      Dem mittleren Container einfach (min-)width 800px geben und zentrieren.

      Wie kann ich in genau mittig zentrieren.

      Links und rechts halt 2 andere Container floaten lassen.

      Wie floaten ich bekomme es hallt nur immer mit 3 festen breiten hin also nicht Variabel oder außen fest innen Variabel.
      Leider eben nicht die mitte genau zentriert und mit fester breite.

      LG Daniel

  2. Hi!

    Mit floaten kommst Du hier nicht weit. Beim float ist der Container immer ganz links oder rechts am rand des umgebenden Elements (erstmal).

    Wenn du also die beiden Conatiner floatest hast du in der mitte den Content und am Rand des Fensters die Container. Du brauchst also etwas, das deine Seite umgibt und so breit ist wie Content + floatende Container. Ich hab dich aber so verstanden, das die beiden floatenden Elemente eine variable Groesse haben.

    Ich wuerde behaupten die Loesung liegt hier darin die beiden Seitenelemente absolut zu positionieren. Du packst beide in dein Contentelement und zentrierst sie absolut. Das linke mit right:800px und das rechte mit left:800px. Voila, ich hab hier einen zentrierten Conatiner mit 2 variablen Seitenelementen.

    Wobei ich 800px zentriertes Element schon ganz schoen merkwuerdig finde. Also in meine Fenster wuerd dein Layout kaum passen, ausser die Seitenelemente sind recht schmal. 800px Gesamtbreite waeren da schon besser. Auf vielen anderen Monitoren (vor allem diese extraweiten) duerften aber 800px eher zuwenig sein und reichlich winzig wirken. Gibt es einen Grund, das nicht variabel zu machen?

    1. Hi!

      Hi,

      also die sache ist die, ich habe bisher auf verschiedenste Art und Weise 3 Spaltige Seiten ausprobiert. Nur ich möchte eben das der Haupt-Div mit 800px breite genau in der mitte des Bildschirm ist. Das hatte ich auch auf einer anderen Seite mit auskommentieren etc. erreicht nur hatte ich da nicht rechts und links davon 2 container die variabel den restlichen Platz ausfüllen damit ich da noch Grafiken reinmachen kann.

      Hoffe das Problem ist einigermaßen klar. Denke mit absoluter position kann man die container nicht so positionieren, dass sie je nach Bildschirmbreite ihre Größe etc verändern.

      LG Daniel

      1. Ach!

        Du willst, dass die Container den ganzen Rest des Bildschirms ausfuellen?! Soll da irgendwas rein? Ich mein, das klingt irgendwie nach Hintergrund und nicht nach Inhalt. Ich bin davon ausgegangen, das die Breite der Container vom Inhalt abhaengig ist...

        1. Ach!

          Du willst, dass die Container den ganzen Rest des Bildschirms ausfuellen?! Soll da irgendwas rein? Ich mein, das klingt irgendwie nach Hintergrund und nicht nach Inhalt. Ich bin davon ausgegangen, das die Breite der Container vom Inhalt abhaengig ist...

          ALso Rechts sollen kleine Thumbs sein mit Überschriften etc und Links sind lediglich zwei Linien die von Rechts nahc Links komplett über den Bildschirm gehen.

          LG Daniel

          1. Aha.

            also brauchst du gar keine Spalte auf der Linken Seite, sondern einfach eine Hintergrundgrafik? (klingt so) Und rechts benoetigst Du einen Container fuer Bilder. Is dann wohl eher ein 2 Spalten Layout, das nach rechts verschoben ist, damit der Content mittig ist, oder? Das klingt kompliziert. Warum soll das eigentlich so sein? Wenn ich Dich richtig verstehe:

            Viewportbreite 800px: links nix, 800px content, rechts nix (vielleicht nach unten verschoben oder scrollend erreichbar?)
            Viewportbreite 1000px: links 100px nix, 800px content, rechts 100px box mit Bildern
            Viewportbreite 2000px: links 600px nix, 800px content, rechts 600px box mit Bildern (bei nem TFT Display mit fixer Aufloesung duerfte diese Variante ziemlich winzig erscheinen)

            Woher weisst du eigentlich, wieviele Bilder du in die Spalte packen musst, damit sie nicht zu voll/leer ist?

            Also im Ernst: Das klingt fuer mich eher nach nem notwendigen Redesign. Aber gut. Ich denk mal drueber nach auch wenn ich der Meinung bin, dass die fixen 800px das ziemlich unmoeglich machen.

            1. Ich kann das schwer erklären ich habe mir mit einem Grafikprogramm die Seite so zusammengestellt wie sie aussehen soll und weiß nun nicht wie ich es am besten umsetze.

              LG Daniel

              1. Her mitm Screenshot! (und ein paar Erlaeuterungen.) Freien Webspace fuer sowas gibts reichlich, wenn du noch nix hast, wo du es hochladen kannst. (Rapidshare & Co)

                Dir kann bestimmt irgendwie geholfen werden. So wie es bisher klingt ist es jedenfalls recht 'interessant'... ^_^

                Was wollt ich gleich? ... Ach ja! Warum 800px? Welchen Grund gibts dafuer? Nur den, dass es in Deinem Grafikprogramm 800px breit ist?

                1. Her mitm Screenshot! (und ein paar Erlaeuterungen.) Freien Webspace fuer sowas gibts reichlich, wenn du noch nix hast, wo du es hochladen kannst. (Rapidshare & Co)

                  Dir kann bestimmt irgendwie geholfen werden. So wie es bisher klingt ist es jedenfalls recht 'interessant'... ^_^

                  Was wollt ich gleich? ... Ach ja! Warum 800px? Welchen Grund gibts dafuer? Nur den, dass es in Deinem Grafikprogramm 800px breit ist?

                  OK ich lade es hoch obwohl ich das nicht so gerne machen wollte weil es eine Seite für eine Webagntur werden sollte. Ähmm die 800px weil ich den Haupt div mit Backgroundgrafiken ausstatten wollte die eine feste breite haben.

                  Oder kann ich das BIld auch per Mail schicken.

                  LG Daniel

                  1. Hm.
                    Verstaendlich. Per mail is nicht so gut, dann muesstest du dich auf mich verlassen. Wer sagt, dass ich Dir helfen kann? Das Layout wird schon nix besonderes sein. Also nimm das Design da raus und stell es dann hoch. Geht das? Also nur nen Schema ohne buntes Zeug oder mit ersatz buntem Zeug. :)

                    Feste Breiten sind immer heikel. Wir leben in einer Zeit in denen die Viewports von ein paar hundert Pixeln bis zu mehreren tausen Pixeln reichen. Da ist etwas das eine feste Breite hat nicht wirklich praktisch. Je nach Zielgruppe natuerlich. Wenn man Handyporal bastelt, brauchts nur ein paar Pixel. Da ist es noch ziemlich egal wie es bei 2000 oder mehr Pixeln Breite rueberkommt. (ausser man moecht auch Geraete bedienen, die keine Handies sind...)

                    1. Hi,

                      habe das Bild mal hochgeladen. (http://img12.myimg.de/Aufbau02e67.jpg)
                      Also da wo Homepage Inhalt und Menü steht sollen noch mehr divs rein, aber das bekomme ich hin. Die Frage ist hallt wie ich die eigentliche Seite die auch einen Schatten bekommen soll genau mittig auf jedem Bildschirm hinbekomme und zwar mit einer festen Breite damit ich den header und so weiter mit dieser Breite erstellen kann. Die zwei äußeren divs sollten dann Variabel jeweils die Hälfte der restlichen Pixelzahl sein so das Rechts Platz für einen Ausschnitt aus den Referenzen ist und Links nur noch für diesen Balken der sich Quer über die Seite streckt.

                      LG Daniel

                      1. Hi!

                        Dein geplantes Layout hat den kleinen Fehler anzunehmen, dass Die User eine bestimmte Viewportgroesse benutzen. Ich wuerde dem Body den blauen Balken als Hintergrund verpassen, den Hauptteil zenbtrieren und daneben einen Bereich fuer die referenzen erschaffen, der sich dem Inhalt anpasst. Damit das Verhaeltnis passend bleibt kann man ihn auch mit einer maximalbreite versehen. so dass bei breitem Viewport rechts auch leerer Platz entsteht.

                        Wenn das nicht gefaellt: Tabellenlayout. Damit kann man genau das basteln, was Du willst. Auch wenn es fragwuerdig erscheint.

                        1. Hi!

                          Hi,

                          habe jetzt was probiert und werde es mal weiter machen. Ich sehe ja dann wie weit ich komme.

                          Ich ahbe einen Wrapper gemacht der die gesamte Breite des Bildschirms einnimmt.

                          Da drinn ist der Hauptcontainer der genau mittig ausgerichtet ist mit einer festen Breite. Daneben nun noch die Referenzen mit float: right.

                          LG Daniel

                          1. Hi!

                            Den wrapper kannst du dir eigentlich sparen. Du kannst mit margin:auto deinen Conatiner leicht im body zentrieren. Dem gibst du deine blaue Linie.

                            Dann wuerde ich den Container rechts mit einer Breite versehen, die irgendwie noch proportional zur Breite deines Hauptcontainers passt. Das Teil kannst du dann im Hauptcontainer unterbringen (gleich als erstes) und mit absoluter Positionierung rechts drankleben. (right:-breite der seitenspalte px und top: bis unter die Linie px) Dabei nicht vergessen, dem Hauptcontainer position zu geben. (relative)

                            Viel Erfolg.

                            1. Hi,

                              Danke für den Hinweis.
                              Muss zugeben, dass ich momentan irgendwie ausgelaugt bin und keine Lust habe in der Freizeit weiterzubasteln. Werde wohl über Ostern dran arbeiten.

                              LG Daniel