Hallo Walter, mir scheint, euer Layout ist jetzt aus diversen Bausteinen zusammengeworfen worden und am Ende passt überhaupt nichts mehr zusammen. Ich meine, ich hätte es schonmal geschrieben: Es ist semantisch falsch, für den Hauptteil der Seite (die Tabelle) das aside-Element zu verwenden. Es ist semantisch ebenfalls suboptimal, die Navigation ins main-Element zu verlegen. Aber das zerreißt euch das Layout nicht. Ihr habt für das main-Element ein display:flex mit flex-flow:wrap gemacht. Die Tabelle hat eine bestimmte vorgegebene Breite (90vw), und wenn der nav-Bereich zu breit wird, bricht die Flexbox das um und die Tabelle steht unter der Navigation. Die Borders führen ebenfalls zu Verschiebungen. Das liegt daran, dass die Größe einer Box standardmäßig durch die Größe des Inhalts bestimmt wird. Wenn Du einem div sagst: width:20em, und ihm dann einen Rand von 2px und ein Padding von 1em gibst, ist die Gesamtbox eben 22em+2px breit. Wenn Du möchtest, dass die angegebenen Abmessungen border und padding enthalten, musst Du die box-sizing Eigenschaft verwenden und auf border-box setzen, damit bekommst Du die Internet Explorer Quirksmode Messmethode, die oft die sinnvollere ist. Kurz gesagt: Responsive Ansätze mit fixen Abmessungen zu kombinieren gelingt eher selten. Vor allem bei einer Flexbox mit Umbruch (flex-flow:wrap). Bevor man ein Layout zusammenschmeißt, muss man die Regeln definieren, denen es folgen soll. Das kann man durch eine Skizze ergänzen. Was hingegen nicht hilft, ist, es durch Beispiele anzudeuten. Mir scheint, ihr wollt folgendes: Reihe 1: - Höhe nach Bedarf. - Ein Headerbereich über die ganze Fensterbreite, mit einem Logo, einem Link zur englischen Version und einer Überschrift. Reihe 2: - Höhe: ??? - Eine Navigation, linksbündig, so breit wie die darin enthalten Navigationspunkte. *Eventuell: Limitiert auf eine bestimmte Maximalbreite* - Der Hauptteil, schließt sich an die Navi an und füllt die Fensterbreite auf. Enthält eine Tabelle. Ist der Hauptteil breite als die Tabelle, soll die Tabelle darin zentriert sein. - Navi und Hauptteil sollen nebeneinander stehen. Frage: IMMER? Was ist bei schmalen Viewports? Reihe 3: - Höhe: nach Bedarf? - Sichtbarkeit: Ständig? Oder soll man bei langen Inhalten die Seite scrollen, um zum Footer zu gelangen? - Ein Footer-Bereich mit Links zu Impressum und Kontaktseite. Links linksbündig, mit etwas Abstand Unklar ist das gewünschte Höhenverhalten von Hauptteil und Gesamtseite. Eure Beispiele zeigen oft genug zwei Scrollbars, einen für die Seite und einen für die Tabelle. Vor allem, wenn man das Fenster verkleinert. Wollt ihr das? Ich finde es falsch. Entweder ist die Gesamtseite höhenlimitiert, so dass der Footer ständig sichtbar ist und man nur den Hauptteil scrollt, oder man scrollt die gesamte Seite (was die sticky-Überschrift der Tabelle unsinnig macht). Diese "Reihen" sind eigentlich ein klarer Hinweis darauf, dass Flexbox das falsche Werkzeug ist. Ich habe schon vor ein paar Tagen (äh, [hier](https://forum.selfhtml.org/self/2025/aug/05/ausrichtung-mit-flex/1821281?srt=yes#m1821281)) empfohlen, das Layout per Grid zu erstellen. [Wäre das eher eure Vorstellung?](https://jsfiddle.net/Rolf_b/cve5xkps/) Die Flexbox im Header ist vermutlich suboptimal. Eigentlich sollte der Logo/Englisch Link (der mir merkwürdig vorkommt) in Grid-Spalte 1 stehen und die h1 in Grid-Spalte 2. Dafür muss man dann aber entweder das header-Element wegschmeißen oder ich müsste euch auch noch mit fiesen Tricks wie display:contents belästigen. Darum habe ich es erstmal so gelassen, wie ihr es erstellt habt. Die tr in der Nav-Liste habe ich weggeschmissen. Die haben da nichts zu suchen, eine Liste ist keine Tabelle. _Rolf_ -- sumpsi - posui - obstruxi

Hallo Walter, mir scheint, euer Layout ist jetzt aus diversen Bausteinen zusammengeworfen worden und am Ende passt überhaupt nichts mehr zusammen. Ich meine, ich hätte es schonmal geschrieben: Es ist semantisch falsch, für den Hauptteil der Seite (die Tabelle) das aside-Element zu verwenden. Es ist semantisch ebenfalls suboptimal, die Navigation ins main-Element zu verlegen. Aber das zerreißt euch das Layout nicht. Ihr habt für das main-Element ein display:flex mit flex-flow:wrap gemacht. Die Tabelle hat eine bestimmte vorgegebene Breite (90vw), und wenn der nav-Bereich zu breit wird, bricht die Flexbox das um und die Tabelle steht unter der Navigation. Die Borders führen ebenfalls zu Verschiebungen. Das liegt daran, dass die Größe einer Box standardmäßig durch die Größe des Inhalts bestimmt wird. Wenn Du einem div sagst: width:20em, und ihm dann einen Rand von 2px und ein Padding von 1em gibst, ist die Gesamtbox eben 22em+2px breit. Wenn Du möchtest, dass die angegebenen Abmessungen border und padding enthalten, musst Du die box-sizing Eigenschaft verwenden und auf border-box setzen, damit bekommst Du die Internet Explorer Quirksmode Messmethode, die oft die sinnvollere ist. Kurz gesagt: Responsive Ansätze mit fixen Abmessungen zu kombinieren gelingt eher selten. Vor allem bei einer Flexbox mit Umbruch (flex-flow:wrap). Bevor man ein Layout zusammenschmeißt, muss man die Regeln definieren, denen es folgen soll. Das kann man durch eine Skizze ergänzen. Was hingegen nicht hilft, ist, es durch Beispiele anzudeuten. Mir scheint, ihr wollt folgendes: Reihe 1: - Höhe nach Bedarf. - Ein Headerbereich über die ganze Fensterbreite, mit einem Logo, einem Link zur englischen Version und einer Überschrift. Reihe 2: - Höhe: ??? - Eine Navigation, linksbündig, so breit wie die darin enthalten Navigationspunkte. *Eventuell: Limitiert auf eine bestimmte Maximalbreite* - Der Hauptteil, schließt sich an die Navi an und füllt die Fensterbreite auf. Enthält eine Tabelle. Ist der Hauptteil breite als die Tabelle, soll die Tabelle darin zentriert sein. - Navi und Hauptteil sollen nebeneinander stehen. Frage: IMMER? Was ist bei schmalen Viewports? Reihe 3: - Höhe: nach Bedarf? - Sichtbarkeit: Ständig? Oder soll man bei langen Inhalten die Seite scrollen, um zum Footer zu gelangen? - Ein Footer-Bereich mit Links zu Impressum und Kontaktseite. Links linksbündig, mit etwas Abstand Unklar ist das gewünschte Höhenverhalten von Hauptteil und Gesamtseite. Eure Beispiele zeigen oft genug zwei Scrollbars, einen für die Seite und einen für die Tabelle. Vor allem, wenn man das Fenster verkleinert. Wollt ihr das? Ich finde es falsch. Entweder ist die Gesamtseite höhenlimitiert, so dass der Footer ständig sichtbar ist und man nur den Hauptteil scrollt, oder man scrollt die gesamte Seite (was die sticky-Überschrift der Tabelle unsinnig macht). Diese "Reihen" sind eigentlich ein klarer Hinweis darauf, dass Flexbox das falsche Werkzeug ist. Ich habe schon vor ein paar Tagen (äh, [hier](https://forum.selfhtml.org/self/2025/aug/05/ausrichtung-mit-flex/1821281?srt=yes#m1821281)) empfohlen, das Layout per Grid zu erstellen. [Wäre das eher eure Vorstellung?](https://jsfiddle.net/Rolf_b/cve5xkps/) Die Flexbox im Header ist vermutlich suboptimal. Eigentlich sollte der Logo/Englisch Link (der mir merkwürdig vorkommt) in Grid-Spalte 1 stehen und die h1 in Grid-Spalte 2. Dafür muss man dann aber entweder das header-Element wegschmeißen oder ich müsste euch auch noch mit fiesen Tricks wie display:contents belästigen. Darum habe ich es erstmal so gelassen, wie ihr es erstellt habt. _Rolf_ -- sumpsi - posui - obstruxi

Hallo Walter, mir scheint, euer Layout ist jetzt aus diversen Bausteinen zusammengeworfen worden und am Ende passt überhaupt nichts mehr zusammen. Ich meine, ich hätte es schonmal geschrieben: Es ist semantisch falsch, für den Hauptteil der Seite (die Tabelle) das aside-Element zu verwenden. Es ist semantisch ebenfalls suboptimal, die Navigation ins main-Element zu verlegen. Aber das zerreißt euch das Layout nicht. Ihr habt für das main-Element ein display:flex mit flex-flow:wrap gemacht. Die Tabelle hat eine bestimmte vorgegebene Breite (90vw), und wenn der nav-Bereich zu breit wird, bricht die Flexbox das um und die Tabelle steht unter der Navigation. Die Borders führen ebenfalls zu Verschiebungen. Das liegt daran, dass die Größe einer Box standardmäßig durch die Größe des Inhalts bestimmt wird. Wenn Du einem div sagst: width:20em, und ihm dann einen Rand von 2px und ein Padding von 1em gibst, ist die Gesamtbox eben 22em+2px breit. Wenn Du möchtest, dass die angegebenen Abmessungen border und padding enthalten, musst Du die box-sizing Eigenschaft verwenden und auf border-box setzen, damit bekommst Du die Internet Explorer Quirksmode Messmethode, die oft die sinnvollere ist. Kurz gesagt: Responsive Ansätze mit fixen Abmessungen zu kombinieren gelingt eher selten. Vor allem bei einer Flexbox mit Umbruch (flex-flow:wrap). Bevor man ein Layout zusammenschmeißt, muss man die Regeln definieren, denen es folgen soll. Das kann man durch eine Skizze ergänzen. Was hingegen nicht hilft, ist, es durch Beispiele anzudeuten. Mir scheint, ihr wollt folgendes: Reihe 1: - Höhe nach Bedarf. - Ein Headerbereich über die ganze Fensterbreite, mit einem Logo, einem Link zur englischen Version und einer Überschrift. Reihe 2: - Höhe: ??? - Eine Navigation, linksbündig, so breit wie die darin enthalten Navigationspunkte. *Eventuell: Limitiert auf eine bestimmte Maximalbreite* - Der Hauptteil, schließt sich an die Navi an und füllt die Fensterbreite auf. Enthält eine Tabelle. Ist der Hauptteil breite als die Tabelle, soll die Tabelle darin zentriert sein. - Navi und Hauptteil sollen nebeneinander stehen. Frage: IMMER? Was ist bei schmalen Viewports? Reihe 3: - Höhe: nach Bedarf? - Sichtbarkeit: Ständig? Oder soll man bei langen Inhalten die Seite scrollen, um zum Footer zu gelangen? - Ein Footer-Bereich mit Links zu Impressum und Kontaktseite. Links linksbündig, mit etwas Abstand Unklar ist das gewünschte Höhenverhalten von Hauptteil und Gesamtseite. Eure Beispiele zeigen oft genug zwei Scrollbars, einen für die Seite und einen für die Tabelle. Vor allem, wenn man das Fenster verkleinert. Wollt ihr das? Ich finde es falsch. Entweder ist die Gesamtseite höhenlimitiert, so dass der Footer ständig sichtbar ist und man nur den Hauptteil scrollt, oder man scrollt die gesamte Seite (was die sticky-Überschrift der Tabelle unsinnig macht). Diese "Reihen" sind eigentlich ein klarer Hinweis darauf, dass Flexbox das falsche Werkzeug ist. Ich habe schon vor ein paar Tagen (äh, [hier](https://forum.selfhtml.org/self/2025/aug/05/ausrichtung-mit-flex/1821281?srt=yes#m1821281)) empfohlen, das Layout per Grid zu erstellen. [Wäre das eher eure Vorstellung?](https://jsfiddle.net/Rolf_b/cve5xkps/) _Rolf_ -- sumpsi - posui - obstruxi

Hallo Walter, mir scheint, euer Layout ist jetzt aus diversen Bausteinen zusammengeworfen worden und am Ende passt überhaupt nichts mehr zusammen. Ich meine, ich hätte es schonmal geschrieben: Es ist semantisch falsch, für den Hauptteil der Seite (die Tabelle) das aside-Element zu verwenden. Es ist semantisch ebenfalls suboptimal, die Navigation ins main-Element zu verlegen. Aber das zerreißt euch das Layout nicht. Ihr habt für das main-Element ein display:flex mit flex-flow:wrap gemacht. Die Tabelle hat eine bestimmte vorgegebene Breite (90vw), und wenn der nav-Bereich zu breit wird, bricht die Flexbox das um und die Tabelle steht unter der Navigation. Die Borders führen ebenfalls zu Verschiebungen. Das liegt daran, dass die Größe einer Box standardmäßig durch die Größe des Inhalts bestimmt wird. Wenn Du einem div sagst: width:20em, und ihm dann einen Rand von 2px und ein Padding von 1em gibst, ist die Gesamtbox eben 22em+2px breit. Wenn Du möchtest, dass die angegebenen Abmessungen border und padding enthalten, musst Du die box-sizing Eigenschaft verwenden und auf border-box setzen, damit bekommst Du die Internet Explorer Quirksmode Messmethode, die oft die sinnvollere ist. Bevor man ein Layout zusammenschmeißt, muss man die Regeln definieren, denen es folgen soll. Das kann man durch eine Skizze ergänzen. Was hingegen nicht hilft, ist, es durch Beispiele anzudeuten. Mir scheint, ihr wollt folgendes: Reihe 1: - Höhe nach Bedarf. - Ein Headerbereich über die ganze Fensterbreite, mit einem Logo, einem Link zur englischen Version und einer Überschrift. Reihe 2: - Höhe: ??? - Eine Navigation, linksbündig, so breit wie die darin enthalten Navigationspunkte. *Eventuell: Limitiert auf eine bestimmte Maximalbreite* - Der Hauptteil, schließt sich an die Navi an und füllt die Fensterbreite auf. Enthält eine Tabelle. Ist der Hauptteil breite als die Tabelle, soll die Tabelle darin zentriert sein. - Navi und Hauptteil sollen nebeneinander stehen. Frage: IMMER? Was ist bei schmalen Viewports? Reihe 3: - Höhe: nach Bedarf? - Sichtbarkeit: Ständig? Oder soll man bei langen Inhalten die Seite scrollen, um zum Footer zu gelangen? - Ein Footer-Bereich mit Links zu Impressum und Kontaktseite. Links linksbündig, mit etwas Abstand Unklar ist das gewünschte Höhenverhalten von Hauptteil und Gesamtseite. Eure Beispiele zeigen oft genug zwei Scrollbars, einen für die Seite und einen für die Tabelle. Vor allem, wenn man das Fenster verkleinert. Wollt ihr das? Ich finde es falsch. Entweder ist die Gesamtseite höhenlimitiert, so dass der Footer ständig sichtbar ist und man nur den Hauptteil scrollt, oder man scrollt die gesamte Seite (was die sticky-Überschrift der Tabelle unsinnig macht). Diese "Reihen" sind eigentlich ein klarer Hinweis darauf, dass Flexbox das falsche Werkzeug ist. Ich habe schon vor ein paar Tagen (äh, [hier](https://forum.selfhtml.org/self/2025/aug/05/ausrichtung-mit-flex/1821281?srt=yes#m1821281)) empfohlen, das Layout per Grid zu erstellen. _Rolf_ -- sumpsi - posui - obstruxi