Estoy desarrollando una página de wysiwyg usando javascript (sin bibliotecas) y debido a que tiene una aplicación bastante especializada, tiene que ser hecha a la medida en lugar de estar fuera de lugar.

Sorprendentemente, tengo un largo camino y está bastante completo, pero estoy teniendo algunas dificultades para hacer la visualización correcta.

Tengo un div que contiene texto e imágenes con las imágenes flotando a la derecha para que el texto fluya a su alrededor.

En algunos lugares necesito que las imágenes estén centradas, así que he insertado un div para contenerlas.

El código de abajo ilustra esto y funciona bien.

El problema surge si tengo más de un div que contiene las imágenes centradas porque el ID de esos divs de centrado es el mismo.

Si cambio los divs centrados a una clase, las imágenes no se centran sino que asumen el flotador correcto del div principal.

¿Hay alguna manera de superar esto?

¿Hay algún problema real que tenga múltiples divs con la misma identificación?

No me preocupa soportar cualquier navegador que no sea FF.

Cualquier consejo sería muy apreciado, gracias por leer.

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>

Gracias por toda tu ayuda.

Incluso cuando cambié el CSS y el HTML para que fuera una clase, las imágenes aún no se pudieron centrar.

La respuesta estaba en la pista de Pekka y la especificidad era la causa.

Las reglas de especificidad dan a un ID una prioridad más alta que una clase.

El div "detalles" tenía una identificación pero el "centreimage" era una clase.

Cambié el CSS por "detalles" a una clase (y el marcado por supuesto) y ahora funciona.

No puedo creer que haya pasado al menos 10 horas tratando de resolverlo, así que gracias a todos por su ayuda.

(Ahora sabes por qué soy "Dim Tim"): o)