Einzelnen Beitrag anzeigen
  #2 (permalink)  
Alt 13.04.2017, 12:13
MrMurphy MrMurphy ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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

Geändert von MrMurphy (13.04.2017 um 12:31 Uhr)
Mit Zitat antworten
Sponsored Links