Berechnung mittels CSS3

Wir stellen uns einmal folgendes Szenario vor: Ihr habt einen Article und eine Sidebar. Beide sollen nebeneinander floaten. Dabei soll die Sidebar eine feste Größe haben und der Article sich dynamisch anpassen. So etwas zu realisieren kann für einen geübten Programmierer einfach sein – aber es geht noch einfacher: mit der Kalkulationsfunktion in CSS.

article {
float: left;
width: calc(100% - 320px);
}

aside {
float: right;
width: 300px;
}

Was passiert hier? Die Sidebar (aside) erhält eine feste Größe von 300 Pixeln und soll rechts floaten. Der Article floatet links und hat die sich aus der Berechnung ergebende Größe vom 320 Pixeln weniger der maximalen Breite. Aufgrund dieser Berechnung ergibt sich ein ständiger Zwischenraum zwischen Article und Aside von 20 Pixeln.