Hallo Lothar!

vielen Dank für Deine Antwort.

Warum "white-space: nowrap" an dieser Stelle?

Jeweils 3 Bilder aus einem Ordner werden eingelesen mit:
echo "<a href='$var2[0].html'><img class='bilder' SRC='$ordner/$files2[$i2]' width='$width' height='$height'></a>".chr(13);

Die angezeigten Bilder können verschiedene Größen haben. Die beiden äußeren werden durch die Pfeile ausgetauscht, die Links dazu bleiben erhalten, so dass man weiter klicken kann. Die Pfeile sollten neben dem großen angezeigten Bild stehen bleiben, sonst werden sie nach oben und unten umgebrochen.

Sehe die Notwendigkeit von nowrap nach wie vor nicht. Weiß auch noch nicht genau, was du mit "ausgetauscht" meinst? Ich gehe aufgrund deiner Beschreibung aktuell davon aus, dass du die Bilder nicht - im Nachhinein durch JS - austauschst sondern von vorneherein lediglich deren Link anzeigst. Deinen Ursprungsthread hatte ich da missverstanden. Die Problematik bleibt allerdings im Ergebnis die Gleiche: Du willst 3 Bilder (2 Pfeilgrafiken und 1 "Hauptbild") nebeneinander anzeigen.

Wenn ich den Browser in der Breite zusammen schiebe, werden die beiden äußeren, kleineren Bilder (Pfeile) gar nicht verkleinert und das große Mittlere zu wenig. Das bedeutet, die 3 Bilder ragen über das div hinaus.

Du hast auch an keiner Stelle gesagt, dass dies geschehen soll.

Wie kann ich das festlegen?

Du vergibst deinem Hauptbild eine feste Breite und aus deinem Ursprungsthread geht noch hervor, dass du zusätzlich eine max-width von 100% mitgibst. Ich hatte jetzt eigentlich vermutet, dass die feste Breite die max-width sowieso überschreibt, aber das war zumindest in dem von mir verwendeten Browser nicht der Fall; ob es dennoch "sauber" ist, weiß ich nicht. Jedenfalls bleibt das Problem, dass du 3 Bilder nebeneinander unterbringen willst und ein Bild schon 100% der Breite einnimmt. Das kann nicht passen. Du müsstest also deine 3 Bilder nehmen, jeden einen %-width-Angabe verpassen und sollest dabei berücksichtigen, dass du in Summe nicht über 100% kommst (beachte, dass ggf. Border und Padding noch zur Breite hinzugerechnet werden müssen).

Deine Bilder sollen _jeweils_ maximal 100% einnehmen! Wenn ein Bild dann schon die volle Breite einnimmt können die anderen folglich nicht mehr daneben angezeigt werden! Beachte auch Außen- und Innenabstände und verwende ein anderes Boxmodell.

Mir fällt leider kein anderes Boxenmodell ein. Siehst Du eine Möglichkeit?

Na, da hab ich mich jetzt wohl im vorherigen Absatz wiederholt, aber ich weiß auch nicht, wie ich es noch klarer formulieren soll. Mit anderes Boxmodell meinte ich, dass du dir die umständliche Berechnung der Gesamtbreite (width + border + padding) mit box-sizing: border-box; auch ersparen könntest, denn dort beinhaltet width dann den Rahmen und Innenabstand.

Hier ist eine Beispielseite: http://www.l-seifert.de/bautzen/Bautzener-Dom.html

Eine oder deine?

Das ist meine Seite zum testen.

Ich habe eine Möglichkeit gefunden. Da, wo ich die Bilder vergleiche und gegen die Pfeile austausche, könnte ich z.B. mit
style="margin: 10px;"
die beiden Pfeilgrafiken auf das größere Bild verschieben. Nur halte ich das für etwas unpraktisch für die Anzeige auf Mobiltelefonen, da man mit dem Finger die kleinen Pfeile treffen muss.

Hier mal mein Test, den ich gebaut habe (bitte nicht als Musterbeispiel ansehen, sondern nur als Anregung). Hab einfach ein schnelles/schmutziges Beispiel bauen wollen. Gerade die Inline-CSS-Anweisung sollten in einer finalen Version möglichst vermieden werden.

<div style="margin: 0; padding: 0; max-width: 100%; width: 998px; background-color: green">  
		<img src="linkspfeil.gif" style="margin: 0; padding: 0; max-width:5%; height: auto;" />  
		<img src="hauptbild.jpg" style="margin: 0; padding: 0; max-width:90%; width: 1000px; height: auto;" />  
		<img src="rechtspfeil.gif" style="margin: 0; padding: 0; max-width:5%; height: auto;" />  
</div>

Gruß
Alex