Tim Wölfle: 2 Divs gleich lang

Hallo,
ich habe jetzt schon in verschiedenen Foren gefragt, aber nie eine funktionierende Antwort bekommen. Also frage ich hier :)
Ich habe ein Design aus verschiedenen Containern, das ungefähr so aussieht:

|----------------------------------------------------|
|                                                    |
||--Logo--|  |--Titel------------------------------| |
|                                                    |
||--Navig-|  |--Inhalt-----------------------------| |
||--------|  |-------------------------------------| |
||--------|  |-------------------------------------| |
||--------|  |-------------------------------------| |
||--------|  |-------------------------------------| |
||--------|  |-------------------------------------| |
||--------|  |-------------------------------------| |
||--------|  |-------------------------------------| |
||--------|  |-------------------------------------| |
||--------|  |-------------------------------------| |
||--------|  |-------------------------------------| |
||--------|  |-------------------------------------| |
||--------|  |-------------------------------------| |
|----------------------------------------------------|

Jetzt hat der normale Hintergrund eine Farbe, aber alle 4 Container eine andere Farbe. Desswegen sieht es weniger gut aus wenn der Navig und Inhaltscontainer verschieden lang sind, weil wenn man dann scrollt, sieht man immer das ende vom Navigcontainer, und der Inhaltscontainer geht noch weiter :-(

Und meine Frage ist nun, wie kann ich ohne Java Script oder eine andere Scriptsprache machen, dass der Navigcontainer gleich lang ist wie der Inhaltscontainer, und zwar immer, auch wenn der Inhalt kürzer ist?

Vielen Dank schonmal, und bitte schreibt eine Antwort,
Tim.

  1. ->height=irgendeinwert.px

    1. ->height=irgendeinwert.px

      Toll! Der Inhaltscontainer ist aber immer unterschiedlich lang!

      1. Hallo,

        ich habs noch nicht wirklich ausprobiert oder schon wieder vergessen - na bei den vilene Versuchen, die ich hier anstelle...

        Pack noch ein DIV drum herum um die beiden und stell die Höhe vom Navi-Div auf 100% ein. Das müsste eigentlich klappen.

        Das Content-Div streckt das MainContainer-Div in der Länge und das Navi-Div wächst dann mit.

        Liebe Grüße aus http://www.braunschweig.de

        Tom

        --
        Intelligenz ist die Fähigkeit, aus Fehlern Anderer zu lernen und Mut die, eigene zu machen.
        1. Hallo,
          nein, deine Idee klappt leider auch nicht, 100% bedeutet blöderweise nur das dann der div so hoch ist wie der Bildschirm.

          Danke aber trotzdem,
          Tim.

    1. ...offiziel zum _css_div_genie ernannt und mit der Aufnahme in meinen Bookmarkordner für spezielle Seiten geehrt.

      Ich habe lange und vergebens nach einen Lösung für diese Problem gesucht.

      Dank
      Paul

    2. Guten Tag,

      ich fürchte nicht, dass linke div ist immer noch kürzer als das rechte. Ich suche auch schon lange nach einer Möglichkeit zwei oder mehr divs gleichlang zu bekommen, so dass die Seite eine Block ergibt und wie bei einer Tabelle alle Spalten gleichlang sind.

      Mit freundlichen Grüssen,
       Sabina

      Hallo,
      ich hatte mir auch mal gedanken gemacht und rausgekommen ist das:
      http://www.fractatulum.de/fraccss/sample/layout6format.htm
      vieleicht nützt es dir ja ein wenig.

      Gruss, Jan aus Dresden

      1. Hallo,

        ich fürchte nicht, dass linke div ist immer noch kürzer als das rechte.

        Narürlich ist er immer noch kürzer, in den beispielen ging es mir um die optik, zwei spalten welche sich in der höhe gleich verhalten, das es technisch nicht so ist sollte nicht so wichtig sein wenn es optisch so aussieht.

        Gruss, Jan aus Dresden

        1. Hallo,

          das es technisch nicht so ist sollte nicht so wichtig sein wenn es optisch so aussieht.

          Aber genau das ist das Problem es sieht optisch eben nicht so; wenn man beiden divs unterschiedliche hintergrundfarbe zuweist, sieht man deutlich, dass sie nicht gleich lang sind.

          http://www.betschke.com/salad/shejidan/index.htmlWenn du dir das anschaust sind rechts und links zwei unendlich oft wiederholte Bilder um dem Ganze einen Rahmen zu geben; mit Tabellen kein Problem, aber wie mache ich sowas mit divs, ich kann ja nicht wissen wie lang die Seite bei User ist also kein height:XXXpx. Etwas ähnliches unter dem oberen Rand ist ein großes Bild; mit einer Tabelle wird es abgeschnitten, wenn das Fenster kleiner ist als das Bild, mit divs gibt es die Möglichkeit nicht, entweder volle Größe oder gar nicht

          Gruß, Sabina

          1. Hallo,

            Aber genau das ist das Problem es sieht optisch eben nicht so;

            in meinem beispiel schon, da der leinke <div> transparent ist und die farbe von dem "hauptdiv" kommt in dem sich die zwei anderen befinden.

            wenn man beiden divs unterschiedliche hintergrundfarbe zuweist, sieht man deutlich, dass sie nicht gleich lang sind.

            ja, ich habe bereits gesagt, dass sie _nicht_ gleichlang sind aber durch den "richtigen" einsatz von hintergrundfarben kann man optisch diesen effekt erzeugen und genau das geschiet in meinen zwei beispielen.

            http://www.betschke.com/salad/shejidan/index.htmlWenn du dir das anschaust sind rechts und links zwei unendlich oft wiederholte Bilder um dem Ganze einen Rahmen zu geben; mit Tabellen kein Problem, aber wie mache ich sowas mit divs,

            auch hier könnte dir mein beispiel weiter helfen, 4 <div>s, ein hauptcontainer in dem sich drei weitere befinden, der hauptcontainer bekommt das hintergrund bild, gekachelt über die ganze fläche, der linke und der rechte sind transparent (ihre höhe spielt _keine_ rolle) und er mittlere ist schwarz und wird mit margin ausgerichtet, fertig, rechts und links die bilder inder mitte schwarz und die höhe richtet sich nach dem inhalt in dem schwarzen div.

            nein, die divs sind nicht gleich lang, ich sag es lieber nochmal, und müssen sie auch nicht, die optik gaugelt drei spalten vor.

            Gruss, Jan aus Dresden

  2. Hi

    ich habe jetzt schon in verschiedenen Foren gefragt, aber nie eine funktionierende Antwort bekommen. Also frage ich hier :)
    Ich habe ein Design aus verschiedenen Containern, das ungefähr so aussieht:
    [...]
    Jetzt hat der normale Hintergrund eine Farbe, aber alle 4 Container eine andere Farbe. Desswegen sieht es weniger gut aus wenn der Navig und Inhaltscontainer verschieden lang sind, weil wenn man dann scrollt, sieht man immer das ende vom Navigcontainer, und der Inhaltscontainer geht noch weiter :-(

    Und meine Frage ist nun, wie kann ich ohne Java Script oder eine andere Scriptsprache machen, dass der Navigcontainer gleich lang ist wie der Inhaltscontainer, und zwar immer, auch wenn der Inhalt kürzer ist?

    Der Navigationscontainer mit height:100% in den Inhaltscontainer und dann mit float:left links floaten lassen.- Das geht aber nur, wenn der Inhalt _immer_ länger ist, als die navi.

    Fabian

    1. Hallo, Fabian,

      Und meine Frage ist nun, wie kann ich ohne Java Script oder eine andere Scriptsprache machen, dass der Navigcontainer gleich lang ist wie der Inhaltscontainer

      Der Navigationscontainer mit height:100% in den Inhaltscontainer und dann mit float:left links floaten lassen.

      Das interessiert mich. Kannst du bitte eine Testseite erstellen? Ich erreiche auf diese Weise nicht das Gewünschte.
      Alleinig im Opera 6.05 wirkt sich height:100% aus, es wird als Höhe des sichtbaren Seitenausschnittes interpretiert ([pref:t=36141&m=197568]), folglich endet das div-Element dort, wo der aktuelle, erste Bildschirm endet, und keinesfalls am Ende der rechten Spalte.

      Tim hatte übrigens schon einmal gefragt und ihm wurden schon einige Möglichkeiten unterbreitet, </archiv/2003/1/35082/#m191213> ff., welche er vermutlich nicht gelesen oder sich nicht verinnerlicht hat. Ich habe das Problem, wie zu sehen ist, bereits vielfältig untersucht.

      Grüße,
      Mathias

      --
      »(...) hier ist ja alles voll Gelegenheiten. Nur gibt es freilich Gelegenheiten, die gewissermaßen zu groß sind, um benützt zu werden; es gibt Dinge, die an nichts anderem als an sich selbst scheitern. Ja, das ist staunenswert.«
      http://www.kafka.org/projekt/schloss/erst.html
      1. Hallo Mathias,

        Ich habe das Problem, wie zu sehen ist, bereits vielfältig untersucht.

        ... nämlich? ;-)

        • Tim
        --
        Ich weiß nie, was für eine Signatur ich nehmen sollte.
        1. Hallo, Tim,

          Ich habe das Problem, wie zu sehen ist, bereits vielfältig untersucht.

          ... nämlich? ;-)

          Worauf willst du hinaus? Mit diesem Satz meinte ich speziell, dass ich in </archiv/2003/1/35082/#m191327> bereits einige Lösungsansätze vorgestellt beziehungsweise verschiedene Beispiellösungen verlinkt habe, weiterhin wurden meiner Auffassung nach von Sven und mir in der Diskussion bereits die wichtigsten zu beachtenden Punkte genannt. Einerseits wurden diese von Tim W. anscheinend nicht beachtet (siehe Kontext), weshalb ich erneut darauf hinweisen wollte, und andererseits wollte ich mit dem Satz unterstreichen, dass ich mich für eventuelle andere Lösungsmöglichkeiten interessiere.

          Mathias

          1. Hallo Mathias,

            Worauf willst du hinaus?

            Es klang einfach so, als würde da noch was brodeln - ich war einfach nur
            neugierig.

            • Tim
            --
            Ich weiß nie, was für eine Signatur ich nehmen sollte.
  3. Hallo,

    tja, mit tabellen wär das natürlich ein leichtes, aber das willst du sicher nicht oder? Hintergrundbild im <body> (mit repeat-y) könnte ich Dir noch emfehlen, ist aber natürlich auch geschummelt:

    +------------+ +------------------+
    |////////////| |                  |
    |transparente| |  text text text  |
    |/navigation/| |  text text text  |
    |////////////| |  text text text  |
    +------------+ |  text text text  |
    ////////////// |  text text text  |
    //background// |  text text text  |
    /////mit////// |  text text text  |
    ///repeat-y/// |                  |
    ////////////// +------------------+
    +---------------------------------+
    | "abdeck"-Layer (falls du unten  |
    | noch nen Freiraum haben         |
    | möchtest)                       |
    +---------------------------------+

    viel Erfolg.

    schö stefan