[Solved] Why should not be id repeated? [duplicate]

Question

Like others before me have said, you are using the id tag which is a unique identifier. Whereas you should use a class to apply styles across multiple elements.

See what the W3C defines an id as: (http://www.w3.org/TR/html401/struct/global.html#h-7.5.2)

Element identifiers: the id and class attributes

Attribute definitions

id = name [CS] This attribute assigns a name to an element. This name
must be unique in a document.

class = cdata-list [CS] This attribute
assigns a class name or set of class names to an element. Any number
of elements may be assigned the same class name or names. Multiple
class names must be separated by white space characters.

What’s more interesting is that you stated that your example works, and it does in most browsers. This doesn’t make it valid or even good HTML/CSS it is just that some browsers pick up on developer’s shortcomings and will render non-standards compliant code as if it were standards compliant.

Here is an example that can never work. As you may know id tags can be used for named anchors. E.g.

<a href="#content">Jump to content</a>
<div id="content">
  some content
</div>
<div id="content">
  some other content
</div>

In this example, which element should the named anchor link to? In most cases I would assume it would go to the first element. However this may not be what the developer wanted.

The id element has more uses than just applying styles to elements, the W3C goes on to state:

The id attribute has several roles in HTML:

As a style sheet selector.

As a target anchor for hypertext links.

As a means to reference a particular element from a script.

As the name of a declared OBJECT element.

For general purpose processing by user agents (e.g. for identifying fields when extracting data from HTML pages into a database,
translating HTML documents into other formats, etc.).

The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these
classes. A class name may be shared by several element instances.

The class attribute has several roles in HTML:

As a style sheet selector (when an author wishes to assign style information to a set of elements).

For general purpose processing by user agents.

You should write standards compliant code so you know it functions in standards compliant browsers. The results are far more predictable and stable across a wider range of browsers and more likely to work in future versions.

Edit: In response to OP’s comments:

CSS:

.content {
    width: 950px;
    margin: auto; // Assuming you want to centre this
}

Whatever you apply the class .content to will have a width of 950px. You don’t need to set 100% width on the #top element as it is a block level div and naturally expands to 100% width.

HTML:

<div id="top">
    <div id="navigation" class="content">
    </div>
</div>

<div id="main" class="content">
</div>

<div id="footer" class="content">
</div>

Accepted Answer