Hallo
Grundsätzlich wäre es sinnvoller statt float Flexbox zu verwenden. Dazu sollte der Quelltext etwas angepasst werden.
Aber zu deiner float-Lösung, obwohl du damit noch viel Freude haben wirst:
Du musst die Breite so anpassen, dass nav und #content nebeneinander genügend Platz haben. Dabei sind alle Angaben zu berücksichtigen, die die Breite beeinflussen können, also neben width auch padding, border und margin.
Wenn das Fenster verkleinert wird werden %-Angaben und gegebenenfalls em-Angaben immer neu berechnet.
Das nav-Element ist 16em breit.
#content ist 81,1% + 2px (zweimal 1px) breit.
Das umgebende Element #wrapper ist maximal 86em breit.
Sobald 16em + 81,1% + 2px breiter als 86em werden rutscht #content zwangsweise unter nav.
Das kannst du zum Beispiel mit einer css-calc-Berechnung verhinden.
Du gibst #content eine Breite von 100% und ziehst alle anderen Breiten davon ab. In deinem Beispiel also
Code:
width: calc(100% - 16em - 2px);
(Info: Bei calc sind die Leerzeichen vor und nach den Rechenzeichen wichtig.)
Dann nutzt #content immer die gesamte zur Verfügung stehende Restbreite aus.
Wenn bei nav noch padding, border oder margin oder bei #content noch padding oder border hinzukommen musst du die Berechnung natürlich anpassen.
Gruss
MrMurphy