Adding structured data markup to a page

I've been reading a lot, and by "a lot" I mean A LOT, about the importance of structured data.  I'm sold.  So I thought I'd give it a try.

We have an upcoming event on the TeamCBC home page, the 2013 Spring Fling.  I originally coded the event information in straight html:

 <p>It's almost time for the MS Spring Fling 2013.</p>
 <p>
 <b>When:</b> April 6th, sign-in starts at 8:00<br />
 <b>Where:</b>  1101 Shiloh Glenn Drive - Hwy 54 & I-540 Morrisville<br />
 <p>The 2013 MS Spring Fling <a href="http://www.active.com/cycling/morrisville-nc/ms-spring-fling-2013">online registration</a> is now open until April 3rd.</p>
 
 When i added the microdata as defined at schema.org, I ended up with this:

<div itemscope itemtype ="http://schema.org/Event">

  <p>It's almost time for the <span itemprop="name">MS Spring Fling 2013</span>.</p> 

  <p><b>When:</b> 

    <meta itemprop="startDate" content="2013-04-06T0800" />April 6th, sign-in starts at 8:00 

<br />  

<b>Where:</b>  

<div itemprop="location" itemscope itemtype="http://schema.org/Place">  

<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">  

 <span itemprop="streetAddress"> 

1101 Shiloh Glenn Drive - Hwy 54 & I-540 Morrisville</span> 

<br /> 

 </div> 

<p>The 2013 MS Spring Fling <a itemprop="url" href="http://www.active.com/cycling/morrisville-nc/ms-spring-fling-2013">online registration</a> 

is now open until April 3rd.

 </div>

The markup took a lot of time, and a lot of referencing the examples on schema.org.  But that wasn't the biggest problem.

When I published my html, turns out the added div structure screwed up my css and the text formatting was blown away.  So looks like if I want to use the microdata markup, i'll have to accommodate for it in the css... really ?!?!  

For the time being, I've put the microdata'ed html in a "mud" test directory, as in "clear as" or "markup data" .. depending on my mood.