Header <h2> floating to be below the next UL list - html

Question

I have a multiple unordered lists, with a h2 titling each list by subject.
Here is the html
<h2>Early Childhood Education</h2>
<ul class="course-list">
<li>Child Growth and Development</li>
<li>Curriculum and Methods in Teaching Early Childhood Education</li>
<li>Introduction to Early Childhood Education</li>
<li>Introduction to Education</li>
<li>Practicum I: Early Childhood</li>
<li>Practicum II: Early Childhood</li>
<li>Practicum in Education</li>
</ul>
<h2>Emergency Medical Technician</h2>
<ul class="course-list">
<li>Emergency Medical Technician (EMT) – Basic</li>
<li>Emergency Medical Technician (EMT) – Paramedic I</li>
<li>Emergency Medical Technician (EMT) – Paramedic II (Field Internship – Part I)</li>
<li>Emergency Medical Technician (EMT) – Paramedic III</li>
<li>Emergency Medical Technician (EMT) – Paramedic IV (Field Internship – Part II)</li>
<li>EMT-Basic Fieldwork</li>
<li>Report Writing for Healthcare Professionals</li>
</ul>
<h2>English</h2>
<ul class="course-list">
<li>African American Literature</li>
<li>Basic Acting Technique</li>
<li>Contemporary American Poetry</li>
<li>English I: College Writing</li>
<li>English II: Introduction to Literature</li>
<li>Essentials of English *</li>
<li>Interpersonal Communication</li>
<li>Interviewing Practices and Principles</li>
<li>Introduction to Drama Study</li>
<li>Introduction to Poetry</li>
<li>Introduction to Technical Writing</li>
<li>Journalism</li>
<li>Journalism II</li>
<li>Literature for Children</li>
<li>Literature of the Western World</li>
<li>Major American Writers</li>
<li>Major English Writers</li>
<li>Modern American Novel</li>
<li>Nonfiction Literature</li>
<li>Public Speaking</li>
<li>Science Fiction</li>
<li>Service Learning – Volunteer Project</li>
<li>Shakespeare</li>
<li>Storytelling</li>
<li>The Short Story</li>
<li>Voice and Diction</li>
<li>Western Mythology</li>
<li>Women in Literature</li>
<li>Writing Workshop I</li>
</ul>
Here is the CSS
.col-middle .course-list li {
width:50%;
float:left;
}
Here is a screen shot of what it looks like: http://i40.tinypic.com/2141nd3.png
The problem you see in the screen shot is the text within the h2 tags is floating up a line if there is some space after the list above it.
I fixed that by setting overflow:auto; within the ul style, but that made the left half of the list discs dissapear (as you see here: http://i39.tinypic.com/2i8y62r.png)
Also, I'd like to create some spacing between the bottom of the ul list, and the h2 header.

Answer 1

You might wrap each h2/ul pair in a div. This is even good for semantics, since the two are related and therefore could be said to be part of a logical division. Then you can float the whole div and keep the elements grouped.

Answer 2

Please try this tutorial for multi column lists
By the way, floats are evil. ;)

Answer 3

Are the h2 tags supposed to be above each unordered list?
Perhaps what you should do is add a clear:both to the h2 definition...
h2 { clear: both; }