Totally stumped here. I've isolated the problem but don't have a clue why it's happening. Here's the CSS (this is for a printed document - that's why I'm using inches):

#printList {
padding:1.5in;
}

#printList ul {
margin-left:.3in;
margin-bottom:.5in;
list-style:none;
}

#printList h4 {
margin-top:.2in;
margin-bottom:.1in;
}

#printList span {
float:left;
width:15%;
}

#printList span+span {
float:left;
width:80%;
}

Here's the HTML:

<div id="printList">
<h2>Appointments</h2>
<h3>Monday, 07/08/2013 - Friday, 07/12/2013</h3>
<h4>Monday, July 8, 2013</h4>
<ul>
<li><span>Something</span><span>Col2</span></li>
<li><span>Something</span><span>Col2</span></li>
<li><span>Something</span><span>Col2</span></li>
<li><span>Something</span><span>Col2</span></li>
</ul>
<h4>Tuesday, July 9, 2013</h4>

</div>

If you leave the list-style:none in the ul, it wipes out the margins on both the ul and the h4. If you put it in a browser, you can see it visually with the last h4 (Tuesday, July 9, 2013). If you remove the list-style:none, the margins behave the way I wanted them do. My questions are:
  1. What's causing this?
  2. How would I fix it, given that I want both the list-style:none and some space between the bottom of the ul and the top of the next h4?
  3. Even assuming there's an easy fix for my code, is there a better way to accomplish this? (Had I continued the code, there would be separate uls for each date and the user could choose as many dates as they want - maybe even a whole year. I'm not sure the way I have it is the best idea. For example, would this whole thing be better as one long nested list and I could put my h4s in an li with extra padding? Or something else?