nance: divs gleich lang IE

Hallo!

Ich habe zwei nebeneinander stehende divs, die bis zum unteren Ende des Fensters gehen sollen, aber oben einen Rand von xx Pixeln haben. Wenn der Inhalt eines der divs größer wird, soll sich das andere entsprechend ausdehnen. Leider spielt der IE bei bottom:0px; nicht mit.
Ist es möglich das Problem zu umgehen, indem man ein großes div1 nimmt, dort 2 oder wenn nötig mehr div2 mit 100% Höhe reinsteckt, die floaten läßt (außer dem letzten), und dort dann wieder div3 für Kopf und Inhalt reinbaut? Also wenn die div3 mehr beanspruchen, sollte sich div2 ausdehnen. Damit sollte sich dann auch div1 ausdehnen. Da das andere div2 100% Höhe hat, sollte es sich dann auch div1 anpassen, oder?

Beim Ausprobieren bin ich dann gleich auf den 3px Bug des IE gestoßen, den ich irgendwie nicht wegbekomme, da div2 ja 100% Höhe haben müssen. Vielleicht kann mir da jemand weiterhelfen. Hier der Code dazu:
[code lang=html]
<div style="height: 100%; width: 100%; background-color: red; margin:0px;padding:0px;border:0px;">  <!--div1-->
  <div style="float:left; height: 100%; width: 12.86em; background-color: blue; margin:0px; padding:0px;border:0px;">  <!--div2-->
  </div>
  <div style="height: 100%; background-color: silver; margin:0px;padding:0px;border:0px;">  <!--div2-->
  </div>
</div>

Vielen Dank
nance

  1. Ahoi nance,

    das was du beabsichtigst lässt sich IMHO so nicht mit divs
    verwirklichen. vll hilft dir aber das hier weiter.
    das was du vorhast geht AFAIK nur mit tabellen.

    MfG

    --
    Alle Angaben wie immer ohne Gewähr
      \     \           /    /
       \     \         /    /
        \     /´¯.l.¯`\    /
        |    l   .l.  (¯ '\     l    l   .l.   \   \     l    l´¯.l´¯.l  \  '|
        
    1. Hi,

      das was du beabsichtigst lässt sich IMHO so nicht mit divs
      verwirklichen.
      das was du vorhast geht AFAIK nur mit tabellen.

      Die Vorgehensweise ist bei CSS/DIVund TABLE/TD prinzipiell identisch. Das umgebende Element (die TD oder ein Extra-DIV) bestimmt die Höhe, die von den beiden Elementen innendrin zu 100% ausgefüllt wird. Wächst ein Content-Element, dann wächst das Eltern-Element und das Geschwister-Element wächst mit. ;-)

      Gruß, Cybaer

      --
      Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
      1. Hallo Cybaer,

        das was du beabsichtigst lässt sich IMHO so nicht mit divs
        verwirklichen.
        das was du vorhast geht AFAIK nur mit tabellen.

        Die Vorgehensweise ist bei CSS/DIVund TABLE/TD prinzipiell identisch. Das umgebende Element (die TD oder ein Extra-DIV) bestimmt die Höhe, die von den beiden Elementen innendrin zu 100% ausgefüllt wird. Wächst ein Content-Element, dann wächst das Eltern-Element und das Geschwister-Element wächst mit. ;-)

        Nun mit DIV-Elementen geht das maines Wissens tatsächlich nicht, aber man kann anstelle von Tabellen Hintergrundgrafiken verwenden, die dann für im Pixelmaß definierte Spalten den Effekt des gemeinsamen Streckens von Spalten simulieren.

        http://de.selfhtml.org/css/layouts/anzeige/hintergrund.htm

        Gruß Gernot

        1. Hallo Gernot!

          aber man kann anstelle von Tabellen Hintergrundgrafiken verwenden, die dann für im Pixelmaß definierte Spalten den Effekt des gemeinsamen Streckens von Spalten simulieren.
          http://de.selfhtml.org/css/layouts/anzeige/hintergrund.htm

          Da die beiden Spalten sich in der Farbe unterscheiden und ich die gesamte Fensterbreite nutzen möchte, aber nicht weiß, wie breit das Fenster beim Nutzer ist, hilft mir eine Grafik leider nicht weiter.

          Vielen Dank auch an Cybaer
          Gruß
          nance

          1. Hallo Nance,

            Da die beiden Spalten sich in der Farbe unterscheiden und ich die gesamte Fensterbreite nutzen möchte, aber nicht weiß, wie breit das Fenster beim Nutzer ist, hilft mir eine Grafik leider nicht weiter.

            Ja aber du kannst die Grafik, wenn sie schon nicht hher als 5 Pixel ist, doch auch 1280 Pixel breit machen oder noch breiter (vielleicht reicht auch, wenn sie als Gif am Ende in eine websichere Farbe übergeht, die der Hintergrundfarbe entspricht.

            Die Schriftgröße musst du ja dann nur in entweder der rechten oder der linken Spalte im Pixelmaß festzulegen, je nachdem, ob du die Hintergrundgrafik rechts oder links ausrichtest.

            Aber ich denke auch, eine nicht-vergrößerbare Schrift ist unter dem Gesichtspunkt der Barrierefreiheit doch mindestens ebenso schlecht wie ein Tabellenlayout oder ein Frameset.

            Du darfst also frei wählen zwischen Pest, Cholera und Syphilis!
            ;-)

            Gruß Gernot

            1. Hi,

              Aber ich denke auch, eine nicht-vergrößerbare Schrift ist unter dem Gesichtspunkt der Barrierefreiheit doch mindestens ebenso schlecht wie ein Tabellenlayout oder ein Frameset.

              Wenn sich Tabellenlayout oder ein Frameset negativ auf die Barrierefreiheit auswirken, dann stimmt sollte das verbessert werden. Solche Probleme sind nicht systemimmanent.

              Gruß, Cybaer

              --
              Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
            2. Hi,

              Die Schriftgröße musst du ja dann nur in entweder der rechten oder der linken Spalte im Pixelmaß festzulegen, je nachdem, ob du die Hintergrundgrafik rechts oder links ausrichtest.

              Wieso die Schriftgröße?
              Die Breite des Elementes - ja. Und dem Inhalt genügend Freiraum für Schriftvergrößerung lassen.

              freundliche Grüße
              Ingo

              1. Hallo Ingo,

                Wieso die Schriftgröße?
                Die Breite des Elementes - ja. Und dem Inhalt genügend Freiraum für Schriftvergrößerung lassen.

                das kann aber doch in bösem Designzerschuss enden, wenn ich Größenveränderungen an der Schrift zulasse, während ich die umgebende Box pixelmäßig limitiere. Wahrscheinlich ist in diesem Zusammenhang overflow:auto das kleinste Übel. Ich gebe zu: mit Frames hätte man das Problem auch.

                Gruß Gernot

                1. Hi,

                  das kann aber doch in bösem Designzerschuss enden, wenn ich Größenveränderungen an der Schrift zulasse

                  Wie willst Du das verhindern? Selbst im IE kann man sowas deaktivieren. Und wenn wie gesagt genügend Freiraum gelassen wird, kann auch nicht allzuviel passieren.

                  freundliche Grüße
                  Ingo

              2. Hallo Ingo

                Die Schriftgröße musst du ja dann nur in entweder der rechten oder der linken Spalte im Pixelmaß festzulegen, je nachdem, ob du die Hintergrundgrafik rechts oder links ausrichtest.
                Wieso die Schriftgröße?
                Die Breite des Elementes - ja. Und dem Inhalt genügend Freiraum für Schriftvergrößerung lassen.

                Und warum muss die Breite des Elements im Pixelmaß festgelegt werden?

                z.B.:

                  
                body {  
                  background:#f00 url(hintergrund.png) repeat-y 10em top;  
                }  
                
                

                Dabei würde

                • #f00, die Farbe für die linke Spalte sein,
                • hintergrund.png eine überbreite Grafik, mit der Farbe bzw. dem Hintergrund
                    der rechten Spalte,
                • 10em, die Breite der linken Spalte

                Auf Wiederlesen
                Detlef

                --
                - Wissen ist gut
                - Können ist besser
                - aber das Beste und Interessanteste ist der Weg dahin!
                1. Hallo Detlef,

                  Und warum muss die Breite des Elements im Pixelmaß festgelegt werden?

                  body {
                    background:#f00 url(hintergrund.png) repeat-y 10em top;
                  }

                    
                  Bei drei Spalten funktioniert das dann aber auch nicht mehr und du musst doch ein Pixelmaß vorsehen oder hast du da auch noch eine Idee?  
                    
                  Gruß Gernot
                  
                  1. Hallo Gernot

                    Bei drei Spalten funktioniert das dann aber auch nicht mehr und du musst doch ein Pixelmaß vorsehen oder hast du da auch noch eine Idee?

                    Dann wird das komplizierter, es sei denn, es ist bekannt, welche der Spalten
                    niemals die längste ist, dann könnten die höchsten Elemente gruppiert werden
                    und diese Variante für dies nocheinmal verwendet werden.

                    Eine andere Version, bei der wohl nicht alle Browser mitmachen werden
                    wäre z.B.:

                      
                    html {  
                      margin:0;  
                      padding:0;  
                      background:#0ff url(hintergrund.gif) repeat-y 10em top;  
                      height:100%;  
                    }  
                    body {  
                      margin:0 15em 0 10em;  
                      background-color:#f00;  
                      padding:0;  
                      min-height:100%;  
                    }  
                    * html body {height:100%;}  
                    #content {  
                      margin:0 -15em 0 -10em;  
                    }  
                    
                    

                    Auf Wiederlesen
                    Detlef

                    --
                    - Wissen ist gut
                    - Können ist besser
                    - aber das Beste und Interessanteste ist der Weg dahin!
                2. Hi,

                  Und warum muss die Breite des Elements im Pixelmaß festgelegt werden?

                  z.B.:

                  body {
                    background:#f00 url(hintergrund.png) repeat-y 10em top;
                  }

                    
                  Auch eine sehr schöne Idee. Und es müßte noch nicht einmal für body definiert werden, sondern könnte genausogut für ein die Navigation und den Inhalt umschließendes DIV eingesetzt werden.  
                    
                  freundliche Grüße  
                  Ingo
                  
                  -- 
                  [[barrierefreie Webseitenerstellung](http://www.1ngo.de/web/) » [Suchmaschinenoptimierung](http://www.1ngo.de/web/seo.html) | [em?](http://www.1ngo.de/web/em.html)] ([Hommingberger Gepardenforelle](http://www.1ngo.de/hommingberger-gepardenforelle/);-)
                  
        2. Hi,

          Nun mit DIV-Elementen geht das maines Wissens tatsächlich nicht,

          Skandal! Scheiß-CSS! Lang lebe Tabellen-Design! >:->

          Gruß, Cybaer

          --
          Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
        3. Ahoi Gernot Back,

          Nun mit DIV-Elementen geht das maines Wissens tatsächlich nicht

          dann haben wir den gleichen wissensstand. ist zuviel inhalt im DIV
          kommts auf die overflow einstellungen an, und overflow: strecke; oder
          vergleichbares gibt es nunmal nicht, wäre vll. eine überlegung für
          kommende CSS versionen!?

          MfG

          --
          Alle Angaben wie immer ohne Gewähr
          \     \           /    /              \    \          /     /
           \     \         /    /                \    \        /     /
            \     /´¯.l.¯\    /                  \   /´¯.l.¯\     /
            |    l   .l.  (¯ '\                   /' ¯)  .l.   1    |
            l    l   .l.   \   \                 /   /   .l.   1    1
            l    l´¯.l´¯.l  \  '|               |'  /  1.¯´1.¯´1    1
            \                                                       /
          1. Hi,

            dann haben wir den gleichen wissensstand. ist zuviel inhalt im DIV
            kommts auf die overflow einstellungen an, und overflow: strecke; oder
            vergleichbares gibt es nunmal nicht,

            ? Ein DIV ist erstmal so groß wie sein Inhalt es notwendig macht - und vergrößert damit auch ein umgebendes DIV. Daß ein nebendran liegendes DIV die Höhe von 100% (was sich ja auf das Elternelement beziehen sollte) dann trotzdem nicht mit aufzieht, ist mir so spontan nicht erklärlich. Kann mir das jemand logisch erklären?

            Müßte doch eigentlich mit float oder inline-block zu bewerkstelligen sein. :-o

            Gruß, Cybaer

            --
            Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
            1. Ahoi Cybaer,

              Kann mir das jemand logisch erklären?

              das liegt daran das das linke und rechte höhe auch 100% habe, sowie
              (html und body) dadurch juckt es das div (ja nach overflow einstellung)
              reichlich wenig, würde er den inneren Divs keine Höhe geben dann wäre
              das natürlich etwas anderes.

              MfG

              --
              Alle Angaben wie immer ohne Gewähr
              \     \           /    /              \    \          /     /
               \     \         /    /                \    \        /     /
                \     /´¯.l.¯\    /                  \   /´¯.l.¯\     /
                |    l   .l.  (¯ '\                   /' ¯)  .l.   1    |
                l    l   .l.   \   \                 /   /   .l.   1    1
                l    l´¯.l´¯.l  \  '|               |'  /  1.¯´1.¯´1    1
                \                                                       /
  2. Hallo Nance,

    solange es sich nur um ein zweispaltiges Layout handelt und du dir sicher bist, dass die Inhaltsmenge einer Spalte so gering ist, dass sie auch bei noch so kleinen Bildschirmauflösungen spätestens im Vollbildmodus komplett darstellbar ist, ohne dass man scrollen muss, hast du eigentlich kein Problem; auch kenes mit dem Drei-Pixel-Bug des IE:

      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
    <html>  
    <head>  
    <title>Diptychon</title>  
    <style type="text/css">  
    [code lang=css]  
    html, body {  
      width:100%;  
      height:100%;  
      margin:0;  
      padding:0;  
      background-color:silver;  
      overflow:hidden;  
    }  
      
    #aussen {  
      height:100%;  
      width:12.86em;  
      float:left;  
      background-color: blue;  
    }  
      
    #innen {  
      height:100%;  
      overflow:auto;  
    }  
    
    

    </style>
    </head>
    <body>
      <div id="aussen">Ein kurzer schmaler nicht scrollbarer Bereich</div>
        <div id="innen">ein anderer langer scrollbarer Text ...
        </div>
      </div>
    </body>
    </html>
    [/code]
    Gruß Gernot

    1. Hallo nochmal,

      wenn ich es mir recht überlege, spricht eigentlich auch nichts dagegen, selbst den äußeren Bwereich per overflow:auto scrollen zu lassen; du hast also überhaupt kein Problem bei einem zweispaltigen Layout.

      #aussen {
        height:100%;
        width:12.86em;
        float:left;
        background-color: blue;

      overflow:auto;

      }

      Gruß Gernot