Candid Dauth: Zwei Kästen nebeneinander auf gleiche Höhe bringen

Heißa, alle,

eigentlich ist das hier schon fast peinlich, schließlich ist das so ein häufiges Problem und solch eine oft gestellt Frage… Aber weder Google noch die Forumssuche wollen mir eine befriedigende Antwort darauf liefern.

Es geht also um die Seite http://ferienwohnungen-wartner.cdauth.de/ferienwohnungen_wartner/. Naja, zu sehen sind zwei Kästen, der eine enthält einen deutschen Text, der andere einen englischen. Beide Kästen sollen sich nebeneinander befinden.

Ab einer bestimmten Schriftgröße wird der deutsche Rahmen nun höher als der englische, logischerweise, da er mehr Text enthält. Ich möchte nun, dass der englische Kasten sich nach unten ausdehnt und immer so hoch bleibt wie der deutsche. Und so trivial das Problem auch erscheinen mag – ich finde einfach keine Lösung.

Mit height:100% kann ich beim derzeitigen Code nichts anfangen, da das Elternelement so gesehen keine Höhe hat und sich die Höhe somit auf das Element selbst bezieht.

Was ich ebenfalls schon probiert habe, ist, den englischen Rahmen absolut zu positionieren, während der deutsche dem normalen Textfluss unterliegt. Das hat soweit auch schön funktioniert, nur leider hat sich Opera selbst in seiner neuesten Version geweigert, den bottom-Wert richtig zu interpretieren – anstatt am unteren Rande auszurichten hat er anhand der oberen Kante des nachfolgenden Elements positioniert.

Soweit ich das beurteilen kann, hätte Folgendes auch funktionieren müssen: Den Englisch-Rahmen rechts floaten zu lassen, während der Deutsch-Rahmen den normalen Textfluss bestimmt. Dadurch sollte ein height:100% im Englisch-Rahmen afaik interpretiert werden – tut aber kein Browser.

Mir fallen nun keinerlei weitere Möglichkeiten ein, und ich hoffe, dass jemand von euch eine Idee hat.

Gautera!
Grüße aus Biberach Riss,
Candid Dauth

--
„Verwende niemals einen Vorteil, den dir ein anderer verschafft hat, zu deinem eigenen Nutzen.“ | Mein SelfCode
http://cdauth.de/
  1. Hi,

    überleg' doch mal: Du hast zwei nebeneinander stehende Elemente. Egal was Du anstellst, solange es keine Tabellenzellen sind (oder sie diese Eigenschaft haben) beeinflussen sie sich nicht in ihrer Höhe.

    Wenn Du nun unbedingt auf eine Tabelle verzichten willst _und_ sicher weißt, welche Box höher ist, könntest Du beide Boxen in ein DIV packen und der höheren Box einen seitlichen Rahmen zur Mitte spenieren.

    freundliche Grüße
    Ingo

    1. Heißa, Ingo,

      Wenn Du nun unbedingt auf eine Tabelle verzichten willst _und_ sicher weißt, welche Box höher ist, könntest Du beide Boxen in ein DIV packen und der höheren Box einen seitlichen Rahmen zur Mitte spenieren.

      Klar, aber das, was in meinem Beispiel zu sehen ist, ist theoretisch nur eine vereinfachte Version von dem, was ich theoretisch haben will. Eigentlich wollte ich zwei Kästen, die in einem bestimmten Abstand zueinander vollständig umrahmt sind, nicht nur eine Trennlinie zwischen sich haben. Ich wollte jetzt nur das mit den Höhen hinbekommen, weshalb ich das design etwas vereinfachte. Du hast Recht, das hätte ich früher sagen sollen.

      überleg' doch mal: Du hast zwei nebeneinander stehende Elemente. Egal was Du anstellst, solange es keine Tabellenzellen sind (oder sie diese Eigenschaft haben) beeinflussen sie sich nicht in ihrer Höhe.

      Heißt das, es gibt keinerlei andere Möglichkeit? Naja, wenn dem tatsächlich so ist, werde ich tatsächlich nur eine Trennlinie benutzen müssen, wie du es oben geschrieben hast.

      Naja, erstmal danke für deine Antwort!

      Gautera!
      Grüße aus Biberach Riss,
      Candid Dauth

      --
      „Versuche niemals, jemandem eine Meinung zu bilden; erläutere ihm maximalerweise alle ausschlaggebenden Fakten, aus welchen er sich dann eine eigene Meinung bilden kann.“ | Mein SelfCode
      http://cdauth.de/
      1. Hi,

        überleg' doch mal: Du hast zwei nebeneinander stehende Elemente. Egal was Du anstellst, solange es keine Tabellenzellen sind (oder sie diese Eigenschaft haben) beeinflussen sie sich nicht in ihrer Höhe.

        Heißt das, es gibt keinerlei andere Möglichkeit? Naja, wenn dem tatsächlich so ist, werde ich tatsächlich nur eine Trennlinie benutzen müssen, wie du es oben geschrieben hast.

        Ja. Nicht wenn Du auf eine Höhenangabe verzichten willst. Denn Du benötigst eine Tabelleneigenschaft (die der IE nur in HTML-Tabellen kennt).

        freundliche Grüße
        Ingo

        1. Heißa, Ingo,

          Vielen Dank für deine Anregungen, auch an Mel.

          Ich habe das ganze jetzt nochmal überdacht¹ und nochmal das mit der absoluten Positionierung ausprobiert. Und siehe da, es hat nun doch halbwegs funktioniert. Der rechte Kasten ist nun absolut positioniert, der linke nicht.

          Das Ganze funktioniert jetzt in Firefox und Opera, im Konqueror zwar nicht, aber das ist nicht so wichtig. Im Konqueror sind die Elemente unerklärlicherweise nicht gleich hoch.

          Was eigenartig ist, ist, dass Opera hier einen anderen Bug zu haben scheint. Er richtet die Flaggen nicht ganz mittig aus.
          Ein Test-Rahmen (der rote) zeigt, warum: Die Elemente mit den Flaggen sind absolut am unteren Rande positioniert, damit sie beide auf der gleichen Höhe sind. Opera verschiebt jetzt das ganze Element irgendwie nach links, ich verstehe nur nicht warum. Firefox und Konqueror machen das richtig.

          Nochmal der Link: http://ferienwohnungen-wartner.cdauth.de/ferienwohnungen_wartner/

          Falls jemand eine Ahnung hat, warum sich Opera so verhält, nur her damit. ;-)

          ¹ von überdenken, nicht von überdachen ;-)

          Gautera!
          Grüße aus Biberach Riss,
          Candid Dauth

          --
          „Bevorzuge Gerechtigkeit auch dann, wenn sie deinen eigenen Nachteil bedeutet.“ | Mein SelfCode
          http://cdauth.de/
          1. hmm und wenn Du den roten kästen

            width: 100%;

            zuweist...? Habe es nicht getestet, probiers doch mal aus?

            1. Heißa, Mel,

              hmm und wenn Du den roten kästen width: 100%; zuweist...? Habe es nicht getestet, probiers doch mal aus?

              Haben sie doch schon…

              Gautera!
              Grüße aus Biberach Riss,
              Candid Dauth

              --
              „Zigaretten bei Leuten sorgen dafür, dass es mich nicht mehr interessiert, ob jene Leute Zigaretten besitzen, da mich solche Leute dann nicht mehr interessieren.“ | Mein SelfCode
              http://cdauth.de/
              1. sorry,
                ich meinte #german-inner und #english-inner...

                1. Heißa, Mel,

                  ich meinte #german-inner und #english-inner...

                  Vielen Dank für den Tipp! Er behebt zwar das Problem nicht, aber diese width-Angabe muss dort trotzdem tatsächlich hinein.

                  Gautera!
                  Grüße aus Biberach Riss,
                  Candid Dauth

                  --
                  „Verwende niemals einen Vorteil, den dir ein anderer verschafft hat, zu deinem eigenen Nutzen.“ | Mein SelfCode
                  http://cdauth.de/
          2. Hi,

            Ich habe das ganze jetzt nochmal überdacht¹ und nochmal das mit der absoluten Positionierung ausprobiert. Und siehe da, es hat nun doch halbwegs funktioniert.

            halbwegs - ja. Nicht exakt und auch noch abhängig von der Schriftgröße. Dazu kommt noch eine Überlagerung in zu schmalen Fenstern.
            Ich würde ja dafür doch eine einfache Tabelle bevorzugen.

            freundliche Grüße
            Ingo

  2. interessantes problem..

    das erste was mir (intuitiv) dazu einfällt ist folgendes:

    die zwei Blöcke in einen div-Container packen.
    Diesen relativ positionieren.
    border-bottom für diesen definieren.
    die zwei flaggen in den relativen container legen.
    diese mit position absolute und bottom: 20px (oder was auch immer) positionieren.

    den zwei blöcken border-right, border-left und border-top verpassen.

    Wie gesagt wäre das erste was mit einfällt. Ausprobiert habe ich es nicht.

    gruss melanie