Spaltenöhen // float // mehrere Elemente im float-Container // Denkfehler....

[BvSt]

Hallo ich habe ein wohl altbekanntes Problem und komme damit nicht weiter.... Es betrifft die Höhe von zwei gefloateten Div-Containern. Ich habe mehrere Beispiele gesehen wo dieses Problem "irgenwie" gefixt wurde... aber bei diesen Beispielen gab es immer nur eine Hintergrundfarbe... in meinem Fall beinhaltet der gefloatete Container mehrere Elemente mit verschiedenen Hintergrundfarben von denen nur ein Element eine variable Höhe hat...

Soll ich das ganze lieber aufgeben oder ist da noch nicht alles verloren?

Bildschirmfoto 2014-11-17 um 18.15.38.jpg

Der ganze Code liest sich hier: http://jsfiddle.net/6kjx6jrL/

Sorry bin noch nicht ganz so fit im Thema

[Christian Marquardt]

.wrapper-white
Das Atribut overflow: hidden !important; verhindert bei mir die komplette Darstellung

Wenn beide Boxen gleich groß sein sollen, muss die Klasse .blue eine Höhe bekommen. Bsp height:600px;

Erstaunlich, das wenn du die CSS-Datei erstellt hast, dich dann aber nicht mit Werkzeugen wie Firebug u.a. auskennst.

Der Code auf der Downloadseite ist unvollständig

[BvSt]

Also das mit der festen Höhe ist so eine Sache... die mir schon in den Sinn gekommen ist... das ganze soll aber im Nachgang noch über ein CMS gesteuert werden... und wie viel Text in dem Teaser künftig stehen wird würde ich ungern mit Pixeln fixieren. Gibt es keine Möglichkeiten das dynamisch zu regeln? Also mit Firebug kenn mich schon ein wenig aus. (Wie kommst du darauf das nicht?) Ich lern halt gerade aber für das Probleme habe ich in meinem Lernmaterial eben keine Lösung ... ich habe auch schon vom Flex-Modell gehört... aber ich bin mir nicht sicher ob das mein Problem löst da ich der Zeile 1 nen variablen Wert geben muss der sich an der Spaltenhöhe des jeweils höchsten Spaltenelements orientiert... Kein Plan ob das überhaupt irgendwie umsetzbar ist...

Den Code gibts auch temporär hier: http://www.grafik.benvonstietencron.de

//Container//---------------------------------------------------------
Spalte 1 (float left) Spalte 2 (float right)
-----------------------------------------------------------------------
Zeile 1 variabel* // Zeile 1 variabel*
-----------------------------------------------------------------------
Zeile 2 fixer Wert // Zeile 2 fixer Wert
-----------------------------------------------------------------------
Zeile 3 fixer Wert // Zeile 3 fixer Wert
-----------------------------------------------------------------------
//Container//---------------------------------------------------------

*(aber immer so hoch wie die höchste der beiden Spalten)


Merci für deine Mühe soweit!

Edith: Das ganze betrifft auch nur die Desktop-Darstellung ... wenn der Viewport zu klein wird, wird es ja eh einspaltig und damit hinfällig...

[Christian Marquardt]

Gerade bei CSS gbit es unzähilge Wege
Weitere Möglichkeit

Das sind keine 2 Boxen, sondern insgesamt eine Tabelle, bestehend aus 2 Spalten. Dann ist die Zeile immer so hoch wie die Zelle mit größtem Inhalt

[BvSt]

Dann kann ich aber wahrscheinlich keinen 1-Spalter für mobile Endgeräte daraus machen oder?

[Christian Marquardt]

Nein, wohl nicht

[BvSt]

Dann ist das auch keine Lösung fürs Problem ... aber vielen Dank!

[Christian Marquardt]

http://www.html-seminar.de/html-css-...erte/?42135f40


https://www.google.de/search?q=css+f..._gG5GLOpXwgbgJ

[BvSt]

Habe ich schon probiert... Da komme ich schon mit dem Padding nach innen des jeweiligen Elements links und rechts in Teufels Küche, ganz zu schweige vom weissen Spaltenabstand der beiden Spalten... Leider Fehlanzeige soweit ich das getestet habe...

[BvSt]

Das hier werde ich mal ausprobieren... und berichten ... Es ist nicht so, das ich bisher kein google genutzt hätte

http://www.cherry-webprojekte.de/blo...ten-und-hoehen

[BvSt]

Also es ist wirklich sehr nervtötend... vorallem mit den drei Zeilen... Theoretisch müsste ich in der Desktopvariante den Divs... Tabellen, Zeilen und Spaltenformatierungen geben ... sie quasi als Tabelle aufbauen... und in der Mobile-Variante alle display-table-cell attribute rausfeuern und die sortierung der divs neu vornehmen, da sie ja jetzt völlig sinnlos geworden sind... ob das alles klappt und Browserkompatibel geschweige denn W3C-Konform ist steht noch in den Sternen... ich geb für heute abend auf...