onli: Trotzdem geht das dann nicht mehr, wenn die Größe des Elementes sich durch die Größe der beinhaltenden Elemente verlängert.

Sorry, das habe ich nicht kapiert. Bitte erkläre mir nochmal was du da meinst. Hab grad wenig Zeit, sonst würde ich es ausprobieren.

Also: Beim Beispiellayout ist die rechte Seitenleiste auf height:100%. Das funktioniert auch und bezieht sich nicht auf den Inhalt, weil in der Seitenleiste nichts drin ist. Wenn aber der Inhalt größer ist, als height: 100% ohne Inhalt es wäre, dann wird die Größe des Elterncontainers nicht angepasst, andere Elemente im gleichen Container bleiben bei der Höhe, die ohne Inhalt sich ergibt.

Ansonsten: http://www.css-petals.net/post/reines_css_dreispalten_layout.html1 scheint ziemlich perfekt zu sein.

jetzt erstmal die Links zum Dreispaltenlayout in flexibler Version.

Erklärung:
http://ago.tanfa.co.uk/css/layouts/flexi_floats/index.html

Testbeispiel:

http://ago.tanfa.co.uk/css/layouts/css-3-column-layout-v2.html

Mit Bildern statt Farben:
http://4haus.de/test/dciwam/bunteseite.html

Wohl die beste Erklärung:
http://www.css-petals.net/post/reines_css_dreispalten_layout.html1

Mit folgendem Beispiel:

http://www.css-petals.net/templates/trinity/

onli: Der fauxcolumns-Ansatz ist ungeeignet – Er mag funktionieren, aber benötigt ein pixelgenaues Bild als Grundlage.

Jein, das Bild kann größer sein und so Flexibilität ermöglichen.

onli: das herausheben aus dem eigenen Container ist kein blöder Gedanke. Nur absolut nicht intuitiv. Genau das meinte ich, hier scheint CSS Handwerkszeug zu fehlen.

Hm, ich denke es ist nicht so einfach. Es gibt Gründe, warum es genauso ist, wie es jetzt realisiert ist. Das ist nicht einfach und auch nicht intuitiv, gar kein Zweifel.

Jedoch sehe ich auch das Problem es einfach und intuitiv zu lösen, denn die möglichen Wünsche die enthalten sein können sind schon vielfältig.

onli: Davon bin ich auch nicht ausgegangen. Aber davon, dass sich heigt auf die Höhe des Elternelementes bezieht.

Wieder nicht intuitiv, es geht um den Inhalt nicht um die optische Höhe. Der Hintergedanke ist wahrscheinlich, Scrollen zu vermeiden, also sind die 100% halt das was der Inhalt braucht.

Ich bin nicht die Heldin im Erklären der Theorien, könnte jedoch nochmal suchen gehen, grad zur Höhe da gabs eine Begründung…

onli: Ich kann und will dich nicht belehren, sorry wenn das so wirkt, aber mein Beispiellayout zeigt auch recht deutlich, dass die height-Angabe an sich so funktioniert (sonst wäre die gelbe umrandete rechte Sidebar nicht bis nach unten verlängert).

Es wirkt nicht belehrend auf mich.

Dein Beispiellayout funktioniert bei mir so:

Wenn ich die Fenstergröße verkleinere, dann geht der rote Kasten nicht mehr bis ans Ende. Der gelbe Kasten jedoch schon.

Damit sind wir bei dem umschließenden Container, deine beiden Sidebars sind in einem Container, dein Inhalt ist in einem anderen Container.

float umfließt und wird sich deshalb immer anzupassen versuchen.

onli: Trotzdem geht das dann nicht mehr, wenn die Größe des Elementes sich durch die Größe der beinhaltenden Elemente verlängert.

Sorry, das habe ich nicht kapiert. Bitte erkläre mir nochmal was du da meinst. Hab grad wenig Zeit, sonst würde ich es ausprobieren.

Ich hatte direkt geantwortet. Mein eigener Kommentar landete, obwohl ich eingeloggt war im Spam, dort habe ich ihn rausgeholt und auf “Genehmigen” gesetzt, tja, wie ich jetzt sehe, hat das wohl nicht geklappt, das Ding ist weg…

Werde irgendwann heute nochmal schreiben, muss aber erst die Links wieder suchen…

>100% bedeutet nur alles anzuzeigen, es heißt nicht, wie man vermuten könnte, dass damit die Höhe danebenliegender Container genutzt wird.

Davon bin ich auch nicht ausgegangen. Aber davon, dass sich heigt auf die Höhe des Elternelementes bezieht. Ich kann und will dich nicht belehren, sorry wenn das so wirkt, aber mein Beispiellayout zeigt auch recht deutlich, dass die height-Angabe an sich so funktioniert (sonst wäre die gelbe umrandete rechte Sidebar nicht bis nach unten verlängert). Trotzdem geht das dann nicht mehr, wenn die Größe des Elementes sich durch die Größe der beinhaltenden Elemente verlängert.

Fein, dass wir uns mal grundsätzlich einig sind bezogen auf Framework und IE.

Ich nehme bei nahezu jedem Layout nochmal einen alles umschließenden Container, der header und wrapper usw. enthält…

Ansonsten ich arbeite nicht mit Prozentwerten, denn hier kann es passieren, dass Browser unterschiedlich interpretieren, man sollte wenn denn dann nicht auf 100% sondern auf 98% oder 99% gehen, um ein bisschen Spielraum zu haben. Trotzdem nicht hat für mich zwei Gründe:
* ich denke damit wieder in recht exakten Werten
* der IE ist da zuweilen ziemlich zickig

onli: Wie schaffen wir es nun, dass die Sidebar sich flexbiel verlängert, immer so hoch wie der content?

Gar nicht, das geht nicht, das ist nicht so gedacht.

Die Werte insbesondere die Prozentwerte für die Höhe beziehen sich auf den Inhalt. 100% bedeutet nur alles anzuzeigen, es heißt nicht, wie man vermuten könnte, dass damit die Höhe danebenliegender Container genutzt wird.

Warum das so ist?
float wurde erfunden um zu umfließen, sieht man hier im Blog meist bei Bildern, die ich vom Text umfließen lasse. Weil es umfließen ist, kann es nicht gleichzeitig fix sein.

Also geht es doch nicht?
Jein. Die Sidebar wird niemals wirklich 100% Höhe haben. Aber sie kann so aussehen als ob.

Genutzt wird ein umschließender Container, dieser hat immer die Höhe der längsten Spalte, diesem gibst ein Hintergrundbild in der passenden Breite deiner Spalten, damit sehen sie aus als wären sie gleich lang, sind es aber nicht. Genaueres hierzu:

Schau mal hier:
Zum Ausprobieren und Nachmachen: http://www.positioniseverything.net/threecolbglong.html

und da über Faux Columns, die heißen so, weil sie eben nur aussehen als ob…
http://www.alistapart.com/articles/fauxcolumns

Für die Hintergrunderklärungen:
http://www.alistapart.com/articles/holygrail

Beispiel zum heiligen Gral des dreispaltigen Layouts:
http://www.alistapart.com/d/holygrail/example_3.html

Deutschsprachig bei SelfHTML:
http://de.selfhtml.org/css/layouts/mehrspaltige.htm#kopf_fuss

Nochmal was zum Rumspielen:
http://www.cssplay.co.uk/layouts/3cols.html

Es geht also doch. Die gefloateten Layouts haben allerdings das Problem, dass weitere floats im Innern der Spalten zu ungeahnten Fehlern vor allem im IE führen können.

Ich ziehe daher stabilere Lösungen vor. Auf uteles Blog habe ich drei Spalten mit position:absolute realisiert, dann kann ich innen noch immer mit floats spielen, ohne Seiteneffekte oder aufwändiges testen.

##############

Ansonsten empfehle ich bei jeglichen Überlegungen zu Layouts mindestens zwei Hilfen:

Die Webdeveloper-Toolbar des Firefox, die erlaubt auf Seiten mit Layouts, die man mag sich ganz einfach mal das CSS dazu anzusehen.

Und spätestens beim selbst entwickeln den Firebug. Innerhalb des Firebug kann man auch mal was ausprobieren, sich ansehen und vieles wird klarer.

Melde dich, wenn ich mich unklar ausgedrückt habe, dich missverstanden habe, oder du sonst an irgendwas hängen bleibst…

Nehmen wir ein drespaltiges Blog-Layout ud machen es vollkommen flexibel, beide Seitenleisten auf eine Seite. Dann würde ich so vorgehen: header, wrapper, darin sidebarcontainer, darin zwei sidebars, daneben content, darunter footer (außerhalb des wrappers). floate ich dann die linke Sidebar, wende auf die rechte die gleiche breite (45%) als margin-left an, sind die nebeneinander. Der Sidebarcontainer selbst 30% width, content 60% width, margin-left 35%. Dann füllen wir content mit Inhalt, der größer ist als die corige height. Wie schaffen wir es nun, dass die Sidebar sich flexbiel verlängert, immer so hoch wie der content? Das ist keine rhetorische Frage, daran bin ich gescheitert. Das Problem ist, dass 100% sich scheinbar nur auf die Bildschirmhöhe bezieht, nicht auf die neue Höhe des wrapper-Elements.

Ich bräuchte sowas wie “height: content.height;”. Und besser als die margin-left und float-lösung wäre: #content {
neighbor-left: #SideBarContainer;
}

Beispielcode: http://www.onli-blogging.de/uploads/layout.html
Gruß