JulianAdenauer: Größe des DIV-Bereichs nach unten Variabel

Hallo,

ich habe folgendes Problem: Ich benutze auf der Homepage meiner Band (http://www.poem-on-pyre.de) einen div-bereich für den Inhalt der jeweiligen Rubrik. Nun beinhalten manchche Bereiche jedoch mehr Text als andere und überschreiten den unteren Rand des div-Elements. Der IE stellt es so dar, wie es haben will, Firefox und Opera aber nicht. Wie kann ich die größe des Bereiches so einstellen, dass er sich an den Inhalt anpasst, aber trotzdem immer eine Mindestgröße besitzt?

Vielen dank schonmal.

Julian

  1. hi,

    Der IE stellt es so dar, wie es haben will,

    Also vermutlich falsch.

    Firefox und Opera aber nicht.

    Gut.

    Wie kann ich die größe des Bereiches so einstellen, dass er sich an den Inhalt anpasst, aber trotzdem immer eine Mindestgröße besitzt?

    Über min-height natürlich.
    Plus Workaround für den IE - wie du schon festgestellt hast, interpretiert der height wie min-height. Also gebe nur dem IE height (über conditional comments bspw., von CSS Hacks, wird in Hinsicht auf den kommenden IE 7 ja inzwischen eher abgeraten), und den anderen min-height.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. danke wahsaga,
      so einfach kann es machmal sein...
      wenn mir jetzt noch jemand sagen kann, wie ich den linken div bereich, der den titel des bereichs enthält auf die selbe größe bringen kann, bin ich vollkommen zufrieden.

      1. hi,

        so einfach kann es machmal sein...
        wenn mir jetzt noch jemand sagen kann, wie ich den linken div bereich, der den titel des bereichs enthält auf die selbe größe bringen kann, bin ich vollkommen zufrieden.

        Sorry, aber da bist du jetzt an einer Stelle angelangt, die gar nicht mehr so einfach ist - das ist mit CSS nicht trivial lösbar.
        Dass sich zwei voneinander unabhängige Elemente in ihrer Höhe gegenseitig beeinflussen, sieht CSS nicht vor.
        Workarounds dafür arbeiten z.B. mit Hintergrundbildern, um eine Spaltenoptik zu simulieren - ein Stichwort hierzu wäre "faux columns".

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. vielen dank für deine kompetente hilfe.
          ich werde mich mal unter dem stichwort "faux columns" umsehen, aber es ist auch nicht so wichtig, dass die beiden gleich groß sind.

          1. Die Lösung mit dem min-height köst mein Problem wohl doch nicht ganz, da der IE diesen Befehl nicht zu kennen scheint und ihn einfach ignoriert. Irgendeine Idee, wie ich den austricksen kann?

            1. Hallo julianadenauer.

              Die Lösung mit dem min-height köst mein Problem wohl doch nicht ganz, da der IE diesen Befehl nicht zu kennen scheint und ihn einfach ignoriert. Irgendeine Idee, wie ich den austricksen kann?

              Der IE < 7 interpretiert http://de.selfhtml.org/css/eigenschaften/positionierung.htm#height@title=height wie min-height.

              Einen schönen Sonntag noch.

              Gruß, Ashura

              1. Der IE < 7 interpretiert http://de.selfhtml.org/css/eigenschaften/positionierung.htm#height@title=height wie min-height.

                Ja, den Verdacht hatte ich auch. Das löst mein Problem aber nicht. Ich kann entweder min-height schreiben und der IE zeigt es falsch an, oder ich schreibe height und Firefox und Opera zeigen es falsch an.

                Ebenfalls einen schönen Sonntag.

                Gruß
                Julian

                1. Hallo julianadenauer.

                  Ja, den Verdacht hatte ich auch. Das löst mein Problem aber nicht. Ich kann entweder min-height schreiben und der IE zeigt es falsch an, oder ich schreibe height und Firefox und Opera zeigen es falsch an.

                  Oder du nutzt einen http://de.selfhtml.org/css/layouts/browserweichen.htm#browserweichen@title=Hack (ich rate zum Star-HTML-Hack), um beides zu notieren.

                  Einen schönen Sonntag noch.

                  Gruß, Ashura

                  1. Oder du nutzt einen http://de.selfhtml.org/css/layouts/browserweichen.htm#browserweichen@title=Hack (ich rate zum Star-HTML-Hack), um beides zu notieren.

                    Super, das hat funktioniert.
                    Vielen Dank.