Adding inner float class breaks the outer class

[sfpiano]

http://www.wam.umd.edu/~sfiorell/scs/index.htm

HTML in question:

<div id="MainBottom">
			<h3>Services</h3><hr />
			<div class="floatBot">
				<h4>Networking</h4>
				<ul>
					<li>Setup your home network</li>
					<li>Troubleshoot the internet</li>
				</ul>
			</div>
			<div class="floatBot">
				<h4>Protect and Sanitize</h4>
				<ul>
					<li>Remove spyware/adware and viruses</li>
					<li>Eliminate popups and other unwanted effects</li>
				</ul>
			</div>
		</div>

And the CSS:

body {
	background: #ffffff url('img/bg.png') top center repeat-y;
	font: 16px Trebuchet MS, Arial, Helvetica, sans-serif; }
  
div#Main {
	margin: 2px 112px 0 112px; }
div#MainHeader h2 {
	border: 1px solid blue; }
div#MainTop {
	border: 1px solid black; }
div#MainTop h3{
	font: 24px Trebuchet MS;
	color: #CCCCCC; }
div#MainTop h4{
	font: 20px Trebuchet MS;
	color: #CC0000; }
div#MainTop p{
	width: 254px;
	margin: -25px 0 0 20px; }
	
div#MainBottom {
	margin: 0 auto;
	text-align: left;
	border: 1px solid green; }
div#MainBottom h3{
	font: 24px Trebuchet MS;
	color: #CCCCCC; }
div#MainBottom h4{
	font: 20px Trebuchet MS;
	color: #CC0000; }
div#MainBottom ul{
	width: 212px;
	margin: -25px 0 0 -25px;
	list-style-type: none; }
div#MainBottom li{
	background: url('img/box.gif') no-repeat;
	background-position: 0 .5em;
	padding-left: .6em; }
	
div.floatBot {
	float: left; }

div#MainFooter {
	font: 14px Trebuchet MS;
	text-align: center; } 
div#MainFooter a {
	color: #FFFFFF; }
div#MainFooter a:hover {
	color: #CC0000; }
div#MainFooter p#fTop {
	color: #000000; }
div#MainFooter p#fBot {
	color: #CCCCCC;
}

As you can see I have the MainBottom class enclosed in a green border. However when I add the floatBot class, the elements within floatBot tags are no longer in the border and instead appear to be following the rules of the MainFooter class instead of MainBottom.

What I was trying to do was have those elements all be on the same row, column style.

[Kravvitz]

1) Green border? I don't see any borders in that page.

2) You should use a complete doctype (one that includes a URL) to get browsers to render as close to the same as possible. I recommend HTML 4.01 Strict. A doctype is not a magic fix. It is the first step in the process of fixing your page. The doctype tells the browser how to render the page.
Activating the Right Layout Mode Using the Doctype Declaration
Fix Your Site With the Right DOCTYPE!
Choosing a DOCTYPE
Doctype switching
Rendering Mode and Doctype Switching
http://www.w3.org/QA/2002/04/Web-Quality
http://www.w3.org/QA/2002/04/valid-dtd-list.html

3) I suggest you remove the <hr>s and put a bottom border on the <h3>s (which really should be <h2>s) instead.

4) Don't forget to make sure that the (X)HTML and CSS code you write is valid.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/