Multiple divs with the same id invalid?

Question

I am developing a wysiwyg page using javascript (no libraries) and because it has a fairly specialised application it has to be custom built rather than off-the-peg.

I have, surprisingly, got a long way and it is pretty much complete but I am having some difficulty getting the display right.

I have a div which contains text and images with the images floated right so the text flows around them.

In some places I need the images centred, so I have inserted a div to contain them.

The code bellow illustrates this and it works well.

The problem arises if I have more than one div containing the centred images because the ID of those centreing divs is the same.

If I change the centreing divs to a class the images don't centre but assume the right float of the parent div.

Is there any way to overcome this?

Is there any real issue having multiple divs with the same id?

I'm not worried about supporting any browsers other than FF.

Any advice would be very greatly appreciated, thanks for reading.

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>

Thank you all for your help.

Even when I changed the CSS and HTML to be a class the images still failed to centre.

The answer was in the clue from Pekka and specificity was the cause.

The specificity rules give an ID a higher priority than a class.

The "details" div had an ID but the "centreimage" was a class.

I changed the CSS for "details" to a class (& the markup of course) and it now works.

Can't believe that I spent at least 10 hours trying to sort that out so thanks to everyone for their help.

(Now you know why I am "Dim Tim") :o)

Answer 1

Yes, it's invalid to have multiple divs with the same id.

Using a class should work fine:

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

If those rules really get overridden, you probably have another rule in place that has higher specificity. In that case, you would have to show us more of your HTML.

Answer 2

You shouldn't have more than one element with the same id. This is invalid and will give undefined results.

If you change your div id to a class, you need to change the CSS appropriately to target the class rather than the id. The purpose of CSS classes is exactly that - targetting multiple, related elements and applying the same styles.

As long as you are targetting the elements correctly, there will be no difference to the result.