Wenn Tagliste bei kleinem Display zweizeilig wird, schiebt sie das darunterliegende JS-Applet aus dem Bild

Auch wenn hier eine JS-Timeline dabei ist, vermute ich, dass es sich wohl eher um eine Frage der div-container handelt.

Vorweg der Link zu der im Aufbau befindlichen Seite: http://kahn.8sf.de/daten.html

Noch mal das Problem: alles bestens ist es solange die tagliste auf eine Zeile passt:

[Blockierte Grafik: http://kahn.8sf.de/normal.jpg]

Sobald aber ein Tag der Tagliste eine zweite Zeile braucht, wird damit der Platz der Timeline verkleinert:

[Blockierte Grafik: http://kahn.8sf.de/umbruch-ein-tag.jpg]

und richtig nervig d.h. für kleine displays komplett sinnlos sieht die Lage aus, wenn nicht nur zwei oder mehr tags auf der zweiten Zeile umgebrochen sind sondern auch der kleine Bedienungsanleitungstext über der Taglist eine zusätzliche Zeile braucht und damit die Taglist selbst noch weiter in die Fläche der Timeline schiebt, weil damit dann die ganze Taglist den Platz der Timeline verdrängt:

[Blockierte Grafik: http://kahn.8sf.de/umbruch-zwei-tag.jpg]

Ich habe nun versucht um dieTagliste einfach noch einen eigenen Container drum zu machen, was aber eher nur noch mehr Chaos verursacht hat, da dann die Timeline plötzlich die Literaturliste darunter überdeckt hat.

Kurz mein kaum vorhandenes html-Latein ist schon mal wieder am Anschlag und ich könnte einen Tipp gebrauchen, wie ich der Tagliste das ungestörte Umbrechen auf zwei oder mehr Zeilen ermöglichen kann, ohne, dass die Timeline dadurch eingeschränkt wird.

BTW. ein weiteres lästiges Problem mit der Timeline, bei dem mir irgendwie der Begriff z-index im Kopfschwebt ohne dass ich genau weiß wo ich jetzt besser einen hohen und wo einen niedrigen eintragen muss, ist der lästige Umstand, dass das Dropdown-Menü sobald es bis zur Timeline ausrollt, hinter dem Timelinerahmen liegt, dort also auch nicht anklickbar ist.

Muss ich jetzt die placement div in der die Timeline aufgerufen wird mit einem niedriegen z-index oder/und die Dropdownmenüs mit hohen z-indexen versehen? Oder gibt es da vielleicht noch ganz andere oder gar einfachere Möglichkeiten für Ordnung zu sorgen?

Für jeden hilfreichen Tipp bin ich sehr dankbar.

Danke schon mal für deine rasche Antwort!

Tut mir leid ich hab das zwar in den head in die Klammer von #tg-container* reingesetzt, aber mir scheint das ehrlich gesagt nichts zu ändern. hier ist die Seite mit der empfohlenen "clear: both;"-Ergänzung.

Vielleicht habe ich da ja was falsch gemacht.

http://kahn.8sf.de/daten-clearboth.html

Kann es vielleicht sein, dass Tags, Applet und vielleicht sogar deren Überschrift nicht von der html-seite sondern igendwie von JS-Dateiein her formatiert werden (und also auch dort etwas zu verändern wäre was verhindert, dass der Tag-Seitenumbruch die Timeline aus dem Bild schiebt?

Ja stimmt, dann das Problem mit dem Hersuschieben der Applet durch den Zeilenumbruch ist damit gelöst, allerdings habe ich jetzt ein anderes Formatierungsproblem wieder, dass ich gerade erst mit der anweisung

#tg-container  {
    box-sizing: content-box;

gelöst hatte. konkret ist der Zoomslider und die untere Rahmenleiste wieder Layout-mäßig hinüber was sicher gut zu erkennen ist wenn man unter diesem Gesichtspunkt:

http://kahn.8sf.de/daten.html

ohne das "clear: both;" vergleicht mit

http://kahn.8sf.de/daten-clearboth.html

mit deiner Ergänzung.

Heißt das also entweder Mobil nutzbar aber etwas im Layout zerschossen oder im Layout ok aber mobil unbrauchbar?

Vielleicht fällt hier ja noch jemanden etwas ein. Danke aber auf alle fälle für die guten Tipps bis hier her.

Ok, jetzt hab ich es, so geht es:

#tg-container  {
    clear: both;
}            
#tg-container * {
    box-sizing: content-box;    
}

Also hat, dein Tipp geholfen. Danke vielmals dafür,

Ich bin sehr sehr dankbar für eure Hilffsbereitschaft!