Dynamic Web Template modifying my CSS divs?

I've been searching around trying to find some information about an odd behavior I'm running into using Microsoft Expressions Web 4, and utilizing their built-in dynamic web template (DWT) feature.

I'm running into an issue whenever I update my DWT, which in turn, updates pages it's attached to if I opt to do so. Naturally, when I'm modifying a page header or a navigation menu, I'd like all of the pages to update with that new information. That works perfectly, all pages attached to the template update accordingly, but there are some other changes made to my CSS.

Here's the deal: every time I update the DWT, my index page gets updated as well. Normally, that would be fine, but it keeps changing my <div id="post"> tags. Lets say I have five <div id="post"> on my index. If I update the DWT, they will look like this after:

<div id="post">

<div id="post0">

<div id="post1">

<div id="post2">

<div id="post3">

As you can guess, my CSS doesn't look the same afterwards, as only one of my post divs will remain active. The others are appended a number and the formatting is ruined. I then need to go back through and delete each number on the end.

Initially, I was running into massive issues using these DWTs, where they were basically rewriting whole pages, adding div within divs, total spaghetti. I figured out, or at least, attributed it to my HTML being a bit messy, and changed lots of tags so that expression web would stop freaking out.

My CSS for posts looks like this:

article, #post { width:auto; padding:5px; border: 1px #A9E8DB groove; background-color:whitesmoke; overflow:auto; margin-bottom:10px; }

Within my editable regions, which are the regions on the page I have specified within the DWT to be editable outside of the template, my HTML looks like this:

<div id="rightcolumn">
    <h2>BlahBlah.</h2>
    <br />
    <div id="post">

            Foo

    </div>
    <br />
    <hr /><br />
    <br />
    <div id="post">

            Foo

    </div>
    <br />
    <hr /><br />
    <div id="post">

            Foo

    </div>
    <br />
    <hr /><br />
    <div id="post">

            Foo

    </div>
    <br />
    <hr /><br />
    <div id="post">

            Foo

    </div>
    <br />
    <hr /><br />
    <div id="post">

            Foo

    </div>
    <hr /></div>

I hope I'm clear enough about my question, and can provide more code if folks think that's necessary, I didn't want to overwhelm (though it's not much more) with arbitrary information.

I'm hoping you folks could share a bit of insight on this issue, perhaps I'm not the first to experience it? I have a feeling it has to do with the way my HTML has been written, which may not be under the best possible practices. I don't see any tags that aren't closed, nor do I see any duplicates of tags, or anything of the sort. The page renders properly and looks the way I expect it to from the GUI.

Any ideas?

I do not know your tool. A ID has to be unique. But maybe you can deal with:

<div class="post">

and

.post {
    width:auto;
    padding:5px;
    border: 1px #A9E8DB groove;
    background-color:whitesmoke;
    overflow:auto;
    margin-bottom:10px;
    }