This makes no sense.

I'm trying to limit my styling to a given piece of content - say, on my event page - so it doesn't trample the styles on all the other pages that use a zoneMain. I want all content to be specified with .event-page, so I can target .zoneMain.event-page instead of all zoneMain everywhere.

So, in zoneMain, I add some content before / content after like this:

Content before: <div class="event-page">
Content after: </div>

Now, what I would expect is this:

<div class="main">
   <div class="event-page">
      <div class="main-inner">
         <!-- all the rest of my content -->
      </div>
   </div>
</div>

But what I get is this:

<div class="main">
   <div class="event-page">
   </div>
   <div class="main-inner">
      <!-- all the rest of my content -->
   </div>
</div>

That is most distinctly NOT before and after. That's before and before. This is completely illogical.