Div's: In a "Class" of their own

Recently, I ran into a problem with a current project of mine. While developing a dynamic news website for my University, I ran into some trouble validating the site. The problem was this:

I had created a blueprint story layout. Each time a story was generated from the database, the same layout would be used (i.e. thumbnail, title, tease) creating a list of stories down the page. The problem, then, was that if each story uses the same code, I end up with several duplicate id's down the page—each time a story occurs, in fact. Well, as you know, this will not validate because an id name can only be used once (i.e. must be unique) within any HTML document. Bear in mind that the site should still work—it just won't validate (and it's such a great feeling when things are implemented properly, plus the piece of mind that it will always work.) So, now what?

Then it occurred to me, as far as HTML goes, a div is just another HTML tag. It can be styled the same way any other block element can. In other words, the div style doesn't have to be an id. What if we use a CSS element that doesn't have to be unique?

Of course! A class! Sure enough, I replaced all of my id tags with classes, and . . . it validated! Eureka! I win. You don't need to worry about "display: block" in your CSS rule for the class because a div is already a block element, so in my case, the list of generated stories naturally positioned how I wanted them to—one stacked on top of another down the page. It was that easy. Here's what it originally looked like in the HTML:

<div id="storyBlock">

<div id ="storyTitle">*database-driven content*</div>

<div id ="thumbnail"><img src=" . . . " /></div>

<div id ="storyTease>*database-driven content*</div>

</div>

Now, the new solution:

<div class="storyBlock>

<div class="storyTitle">*database-driven content*</div>

<div class="thumbnail"><img src=" . . . " /></div>

<div class="storyTease>*database-driven content*</div>

</div>

As far as the CSS goes, it can remain the same; just change your id's to classes (i.e. switch out the pound sign before each id name, for a period like so:  #storyBlock becomes .storyBlock) You can, then, keep all of the CSS rules how they are.