Problem mit div oder nav

[Rolf B]

Hallo Panda,

die Flexbox ist schon recht passend für deinen nav-Balken. Damit kannst du schön vertikal und horizontal zentrieren, und wenn Du magst, auch Abstände einfügen.

img.left hast Du richtig verstanden: es beschränkt die CSS Regel auf img Elemente mit Klasse left. Es hängt von deinem Anwendungsfall ab, was „richtiger“ ist.

Jetzt, wo ich nochmal drüber nachdenke... Klassen wie left oder right haben einen etwas abgestandenen Geruch - man soll Klassen nach Inhalt vergeben, nicht nach Designwunsch. Und darum: dein Anwendungsfall sieht eher danach aus, als hättest Du eine Folge von Absätzen mit Bildern, wo das Bild abwechselnd links und rechts stehen soll. In diesem Fall wäre es wohl besser, die Klassen ganz wegzulassen und statt dessen die Sequenz aus hr, img und p in ein Container-Element zu packen (article bietet sich an) und das CSS Feature even/odd auszunutzen:

main article:nth-of-type(odd) img {	float: left; margin-right: 0.4em; }
main article:nth-of-type(even) img { float: right; margin-left: 0.4em; }

Dann musst Du nicht aufpassen, welches img du mit left oder right markierst, CSS macht es automagisch.

Und wenn Du dann noch etwas in dieser Art hinzufügst:

main article { border-top: 2px groove #d0d0d0; padding: 0.3em 0; }
main article:first-of-type { border-top: none; }

kannst Du auch das <hr> weglassen, dessen Funktion übernimmt dann die top-border des article (außer für den ersten, da wird sie abgeschaltet). Solche Optik überlässt man besser dem Style. In Version 2 des Fiddle habe ich das mal gemacht.

Rolf