Multiple divs with same identifier invalid?

Question

I am developing a wysiwyg page using javascript (without libraries), and since it has a rather specialized application, it must be executed separately, and not by default.

Oddly enough, I have come a long way, and this is quite a lot, but I have some difficulties with properly setting up the display.

I have a div that contains text and images with images located to the right so that the text flows around them.

In some places, I need images centered, so I inserted a div to contain them.

Below is an example of code that works well.

The problem arises if I have more than one div containing centered images because the identifier of these centering divs is the same.

If I change the centering dividers to a class, the images are not centered, but accept the correct float of the parent div.

Is there any way to overcome this?

Is there any real problem with multiple divs with the same id?

I am not worried about supporting any browsers other than FF.

Any advice would be 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 CSS and HTML to be a class, the images were still not centered.

The answer was a tip from Pekka, and the reason was certainty.

Specificity rules give an identifier a higher priority than a class.

The “detail” div had an ID, but “centreimage” was a class.

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

I can’t believe that I spent at least 10 hours trying to figure it out, thanks to everyone for their help.

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

Answer 1

Yes, it is not valid to have multiple divs with the same identifier.

Using the class should work fine:

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

If these rules are really overridden, you probably have another rule that has a higher specificity . In this case, you will need to show us more of your HTML.

Answer 2

You must not have more than one item with the same identifier. This is incorrect and will give undefined results.

If you change your div id to a class, you need to change the CSS accordingly to target the class, not the id. The goal of CSS classes is that: - target multiple related elements and apply the same styles.

As long as you correctly target the elements, there will be no difference with the result.

Answer 3

As you should know, each identifier must be unique. In your example, the output seems like a small mistake. Try setting the class attribute to a div, not an image. If you don’t have good reasons for a dome, you should consider the class attribute each time.

Now this is a set of text alignment for the children of your image, for example. this will be the alt value if the image cannot be uploaded.