[SOLVED]Paragraph float ruins entire box's background-color?

This has been bugging me for days.

http://www.teamserenity.com/IYTYGIB/index.htm

Don't look at it unless it's Firefox, or else it will look like *beep*.

Anyway, under the recent posts section, every other post is supposed to have a gray background. So, I styled the div with background-color: #f2f2f2; and it still looked white. So, I fiddled with the styles until I found out that the paragraph ( I just moved to NYC... ) is somehow "breaking" the background color ( I also tried styling the background with an image, fyi. ) - specifically the float: right; style. Anyone venture a guess as to why this is happening? Relevant code below:

HTML:



I need to find a private school for kids near NYC, any help?

10/11/2007 1:25:35 PM by ronpaulisgod

I just moved to NYC and I need to start looking into private schools for my children. I'm not concerned about cost, but I don't want to be far away from the city. There are so many schools to sort through and I don't know where to start. If anyone can recommend some ...

CSS:

#posts { margin: 40px 0 0 -11px; width: 700px; }

#posts h2 {
font-family: Verdana, sans-serif;
font-weight: normal;
}

.post {
clear: both;
border-top: 1px solid #999;
}

img.poster {
float: left;
margin: 20px 10px 0 10px;
}

img.sillhouette {
float: left;
margin: 10px 11px 0 0;
}

.post h3, #gray h3, #gray2 h3 {
font-weight: normal;
color: #c01717;
display: inline;
float: left;
}

.post h6, #gray h6, #gray2 h6 {
color: #000;
font-size: .75em;
line-height: .85em;
float: left;
margin: -18px 0 0 30px;
font-weight: normal;
}

.post h6 a, #gray h6 a, #gray2 h6 a {
color: #c01717;
text-decoration: none;
}

.post p, #gray p, #gray2 p {
float: right;
width: 580px;
margin-right: 14px;
padding-bottom: 25px;
font-family: sans-serif;
font-size: .85em;
}

#gray, #gray2 {
clear: both;
border-top: 1px solid #999;
background-color: #ccc;
}