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

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><a href="/academics/courses/child_growth_and_development/" title="Child Growth and Development">Child Growth and Development</a></li>
    <li><a href="/academics/courses/curriculum_and_methods_in_teaching_early_childhood_education/" title="Curriculum and Methods in Teaching Early Childhood Education">Curriculum and Methods in Teaching Early Childhood Education</a></li>
    <li><a href="/academics/courses/introduction_to_early_childhood_education/" title="Introduction to Early Childhood Education">Introduction to Early Childhood Education</a></li>
    <li><a href="/academics/courses/introduction_to_education/" title="Introduction to Education">Introduction to Education</a></li>
    <li><a href="/academics/courses/practicum_i_early_childhood/" title="Practicum I: Early Childhood">Practicum I: Early Childhood</a></li>
    <li><a href="/academics/courses/practicum_ii_early_childhood/" title="Practicum II: Early Childhood">Practicum II: Early Childhood</a></li>
    <li><a href="/academics/courses/practicum_in_education/" title="Practicum in Education">Practicum in Education</a></li>
</ul>

<h2>Emergency Medical Technician</h2>
<ul class="course-list">    
    <li><a href="/academics/courses/emergency_medical_technician_emt_basic/" title="Emergency Medical Technician (EMT) – Basic">Emergency Medical Technician (EMT) – Basic</a></li>
    <li><a href="/academics/courses/emergency_medical_technician_emt_paramedic_i/" title="Emergency Medical Technician (EMT) – Paramedic I">Emergency Medical Technician (EMT) – Paramedic I</a></li>
    <li><a href="/academics/courses/emergency_medical_technician_emt_paramedic_ii_field_internship_part_i/" title="Emergency Medical Technician (EMT) – Paramedic II (Field Internship – Part I)">Emergency Medical Technician (EMT) – Paramedic II (Field Internship – Part I)</a></li>
    <li><a href="/academics/courses/emergency_medical_technician_emt_paramedic_iii/" title="Emergency Medical Technician (EMT) – Paramedic III">Emergency Medical Technician (EMT) – Paramedic III</a></li>
    <li><a href="/academics/courses/emergency_medical_technician_emt_paramedic_iv_field_internship_part_ii/" title="Emergency Medical Technician (EMT) – Paramedic IV (Field Internship – Part II)">Emergency Medical Technician (EMT) – Paramedic IV (Field Internship – Part II)</a></li>
    <li><a href="/academics/courses/emt_basic_fieldwork/" title="EMT-Basic Fieldwork">EMT-Basic Fieldwork</a></li>
    <li><a href="/academics/courses/report_writing_for_healthcare_professionals/" title="Report Writing for Healthcare Professionals">Report Writing for Healthcare Professionals</a></li>
</ul>

<h2>English</h2>
<ul class="course-list">
    <li><a href="/academics/courses/african_american_literature/" title="African American Literature">African American Literature</a></li>
    <li><a href="/academics/courses/basic_acting_technique/" title="Basic Acting Technique">Basic Acting Technique</a></li>
    <li><a href="/academics/courses/contemporary_american_poetry/" title="Contemporary American Poetry">Contemporary American Poetry</a></li>
    <li><a href="/academics/courses/english_i_college_writing/" title="English I: College Writing">English I: College Writing</a></li>
    <li><a href="/academics/courses/english_ii_introduction_to_literature/" title="English II: Introduction to Literature">English II: Introduction to Literature</a></li>
    <li><a href="/academics/courses/essentials_of_english/" title="Essentials of English">Essentials of English</a> *</li>
    <li><a href="/academics/courses/interpersonal_communication/" title="Interpersonal Communication">Interpersonal Communication</a></li>
    <li><a href="/academics/courses/interviewing_practices_and_principles/" title="Interviewing Practices and Principles">Interviewing Practices and Principles</a></li>
    <li><a href="/academics/courses/introduction_to_drama_study/" title="Introduction to Drama Study">Introduction to Drama Study</a></li>
    <li><a href="/academics/courses/introduction_to_poetry/" title="Introduction to Poetry">Introduction to Poetry</a></li>
    <li><a href="/academics/courses/introduction_to_technical_writing/" title="Introduction to Technical Writing">Introduction to Technical Writing</a></li>
    <li><a href="/academics/courses/journalism/" title="Journalism">Journalism</a></li>
    <li><a href="/academics/courses/journalism_ii/" title="Journalism II">Journalism II</a></li>
    <li><a href="/academics/courses/literature_for_children/" title="Literature for Children">Literature for Children</a></li>
    <li><a href="/academics/courses/literature_of_the_western_world/" title="Literature of the Western World">Literature of the Western World</a></li>
    <li><a href="/academics/courses/major_american_writers/" title="Major American Writers">Major American Writers</a></li>
    <li><a href="/academics/courses/major_english_writers/" title="Major English Writers">Major English Writers</a></li>
    <li><a href="/academics/courses/modern_american_novel/" title="Modern American Novel">Modern American Novel</a></li>
    <li><a href="/academics/courses/nonfiction_literature/" title="Nonfiction Literature">Nonfiction Literature</a></li>
    <li><a href="/academics/courses/public_speaking/" title="Public Speaking">Public Speaking</a></li>
    <li><a href="/academics/courses/science_fiction/" title="Science Fiction">Science Fiction</a></li>
    <li><a href="/academics/courses/service_learning_volunteer_project/" title="Service Learning – Volunteer Project">Service Learning – Volunteer Project</a></li>
    <li><a href="/academics/courses/shakespeare/" title="Shakespeare">Shakespeare</a></li>
    <li><a href="/academics/courses/storytelling/" title="Storytelling">Storytelling</a></li>
    <li><a href="/academics/courses/the_short_story/" title="The Short Story">The Short Story</a></li>
    <li><a href="/academics/courses/voice_and_diction/" title="Voice and Diction">Voice and Diction</a></li>
    <li><a href="/academics/courses/western_mythology/" title="Western Mythology">Western Mythology</a></li>
    <li><a href="/academics/courses/women_in_literature/" title="Women in Literature">Women in Literature</a></li>
    <li><a href="/academics/courses/writing_workshop_i/" title="Writing Workshop I">Writing Workshop I</a></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; }