One of my students had an interesting problem that I was able to resolve the code, just would like some type of explanation as to why it happened. Here are excerpts of the code:

body { background-color: orange;
color: #d5e3ff;
font-family: Verdana, Arial, sans-serif;}
#wrapper { margin-left: auto;
margin-right: auto;
min-width: 700px;
width: 80%;
color: #000066;
background-color: #ffffff; }
#leftcolumn { float: left;
width: 150px; }
#rightcolumn { float: left;
margin-left: 180px;
padding-bottom: 20px; }

<body>
<div id="wrapper">
<div id="leftcolumn">
<ul><li> <a href="index.html">Home</a></li>
<li> <a href="services.html">Services</a></li>
<li><a href="askvet.html">Ask the Vet</a></li>
<li><a href="contact.html">Contact</a></li></ul></div>
<div id="rightcolumn">
<dl><dt class="category" >Full Service Facility</dt>
<dd>Vererines and staff are on duty 24 hours a day, 7 days a week.</dd>
<dt class="category">Years of Experience</dt>
<dd>Fish Creek Veterinarians have provided quality care for your beloved animals since 1984</dd>
<dt class="category">Open Door Policy</dt>
<dd>Our professionals welcome owners to stay with their pets during any medical procedure.</dd></dl>
</div></div>
</body>

The content in the wrapper is supposed to show on a white background but because of the 2 float: left rules, the white background is ignored (or overwritten) and the orange background appears. If the float: left rule in the rightcolumn id is removed, the background appears white as it is supposed to. I have removed some code in order to post here, but this code will render with the problem.
Thanks to anyone that can shed some light.
Bob McP