Ich entwickle eine Wysiwyg-Seite mit Javascript (keine Bibliotheken) und da es eine ziemlich spezialisierte Anwendung hat, muss sie maßgeschneidert und nicht von der Stange sein.

Ich habe überraschenderweise einen langen Weg hinter mir und es ist ziemlich vollständig, aber ich habe einige Schwierigkeiten, das Display richtig hinzubekommen.

Ich habe ein div, das Text und Bilder mit den Bildern enthält, die nach rechts verschoben werden, also fließt der Text um sie.

An einigen Stellen müssen die Bilder zentriert sein, daher habe ich ein Div eingefügt, um sie zu enthalten.

Der folgende Code veranschaulicht dies und es funktioniert gut.

Das Problem tritt auf, wenn ich mehr als ein Div habe, das die zentrierten Bilder enthält, da die ID dieser zentrierten Divs dieselbe ist.

Wenn ich die zentrierten Divs in eine Klasse ändere, werden die Bilder nicht zentriert, sondern nehmen das rechte Float der übergeordneten Div an.

Gibt es eine Möglichkeit, dies zu überwinden?

Gibt es ein echtes Problem mit mehreren Divs mit derselben ID?

Ich mache mir keine Sorgen, andere Browser als FF zu unterstützen.

Jeder Rat wäre sehr dankbar, danke fürs Lesen.

Dim Tim: o)

#details {
    width: 698px;
    background-color: #FFC;
}

#details img {
    float: right;
}   

.centreimage img {
    float: none;
}

.centreimage {
    float: none;
    text-align: center;
}




<div id="details">
  <p>Some text here</p>  
<img src="10750bath.jpg" height="166" width="250"> 
 <p>Which flows around the image on the right</p>
 <p>blah</p>
 <p>blah</p>
 <p>blah</p>
 <p>blah</p>
 <p>blah</p>
 <p>blah</p>

<p>The next image should be centred</p>

<div><img src="10750bath.jpg" width="250" height="166" class="centreimage"></div>

<p>more text</p>
<p>more text</p>
</div>

Vielen Dank für Ihre Hilfe.

Auch wenn ich CSS und HTML in eine Klasse geändert habe, konnten die Bilder nicht zentriert werden.

Die Antwort lag im Hinweis von Pekka und die Spezifität war die Ursache.

Die Spezifitätsregeln geben einer ID eine höhere Priorität als einer Klasse.

Das "Details" -Div hatte eine ID, aber das "Centerimage" war eine Klasse.

Ich habe das CSS für "Details" in eine Klasse geändert (& das Markup natürlich) und es funktioniert jetzt.

Ich kann nicht glauben, dass ich mindestens 10 Stunden damit verbracht habe, das zu klären. Vielen Dank an alle für ihre Hilfe.

(Jetzt weißt du warum ich "Dim Tim" bin): o)