divs gleich lang IE

[nance]

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

[Daniel]

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

[Cybaer]

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

[Gernot Back]

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

[nance]

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

[Gernot Back]

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

[Cybaer]

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

[Ingo Turski]

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

[Gernot Back]

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

[Ingo Turski]

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

[Detlef G.]

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

[Gernot Back]

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

[Detlef G.]

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

[Ingo Turski]

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/);-)

[Cybaer]

Hi,

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

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

Gruß, Cybaer

[Daniel]

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

[Cybaer]

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

[Daniel]

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

[Gernot Back]

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

[Gernot Back]

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