CSS-Problem - Spaltenbreiten anpassen

[innuXTC]

Servus @ all,

ich bräuchte bitte mal kurz Eure Hilfe zum Thema CSS im Standardtemplate, da ich irgendwie den Wald vor lauter Bäumen nicht sehe.

Standardmässig ist die Breite des Shops auf ~ 980px angelegt, was für uns jedoch zu klein ist. Die beste Lösung für uns wäre, wenn der Shop eine Breite von 80% hätte. Also so breit wie möglich - je nach Auflösung - jedoch mit etwas Abstand zum Rand ... letzteres aus optischen Gründen.

Die Linke und die Rechte Spalte (Boxen) haben bei uns eine Fix-Breite von je 200px.

Der Seiten-Inhalt sollte entsprechend breit und von der linken bis zur rechten Box reichen.

Also 3 Spalten über die ganze Seite, linke und rechte Spalte mit fester Breiste, Mitte dynamisch.

Die Stellen die dafür in der CSS zuständig sind, habe ich gefunden und die mir bekannten Befehle ausprobiert. Aber entweder ist dann eine Spalte nach unten verschoben oder die mittlere Spalte ragt in die rechte Spalte hinein

Die CSS-Datei habe ich jetzt wieder resetten und würde mich freuen, wenn mir jemand den entsprechend Code-Zeilen hier zur Vergügung stellen könnte. Sicherlich hat schon jemand soetwas in seinem Template umgesetzt.

Herzlichen Dank im Voraus,
innuXTC

Linkback: https://www.modified-shop.org/forum/index.php?topic=30361.0

[Matt]

Geht entweder mit Flexbox oder mit calc().

Für die calc()-Lösung muss:

Code: CSS  [Auswählen]

#wrap {
    width: 100%;
}
#contentwrap {
    width: 100%;
}
#content {
    width: calc(100% - 450px);
}
 

Die anderen CSS-Anweisungen bleiben natürlich. 450px deswegen weil #content noch links und rechts 25px padding hat.

Browserunterstützung:
http://caniuse.com/calc

Flexbox-Lösung:

Code: CSS  [Auswählen]

#wrap {
    width: 100%;
}
#contentwrap {
    width: 100%;
    display: flex;
}
#content {
    flex: 1;
}
 

Browserunterstützung:
http://caniuse.com/flexbox