Dynamisches Tabellenlayout

    Hallo, liebe Gemeinde.


    Ich würde gerne ein Tabellenlayout unter Verwendung von CSS auf die Beine stellen,
    das auf der linken Seite eine feste Zelle von 200px hat, die rechte sich den Browser anpasst.
    Soweit so gut, doch nun kommt das Problem:


    Das innere der rechte enthält nochmals drei Zellen, die jeweils mind. 120px und max. 180px breit sein sollen.
    Die Abstände davor und danach sollen gleichermaßen verteilt werden - oder kurz und knapp, die drei Zellen sollen immer mittig ausgerichtet sein.
    Die drei Zellen können sich in den min. und max. frei bewegen.


    Das ganze soll auch noch funktionieren, wenn man den Browser individuell verkleinert, um zb. kleinere Auflösungen auszutesten.


    Ich bekomme es aber einfach nicht hin, und würde mich sehr über Lösungsansätze freuen.


    Beste Grüße und danke vorab.

    Es gibt Möglichkeiten in css zu rechnen (z.B. % und px werte).

    CSS
    #linke{
    width: 200px;
}
#rechte{
    width: calc( 100% - 200px );
}


    CSS Flexbox könnte dir auch helfen.. :) (die 1. 3 aufjedenfall anschauen! )


    Zitat von http://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Achtung, veralteter Syntax!


    Wenn ihr euch mit dem Thema Flexbox beschäftigt, werdet ihr schnell merken, dass unterschiedliche Schreibweisen existieren. Dazu müsst ihr wissen, dass sich der Syntax in der Vergangenheit mehrfach verändert hat. Erfreulich ist allerdings, dass die Funktionsweise beibehalten wurde. Wenn ihr auf veraltete Quellen stoßt, könnt ihr den Code daher mit verhältnismäßig geringem Aufwand aktualisieren.


    Immer wenn ihr den Befehl display: box;, die Eigenschaften box- oder den Befehl display: flexbox; seht, handelt es sich um veralteten Code! Der aktuelle Syntax lautet display:flex; bzw. die Eigenschaften beginnen mit flex-. Einen sehr detaillierten Artikel zu diesem Thema findet ihr auch auf CSS Tricks.


    Ich denke das sollte deine Probleme lösen, allenfalls wäre Code mitposten gut! :)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden