Nested <div> issue with Firefox 1

[OrganizedChaos]

I have a issue with some CSS, please take a look at this.

CSS for page

#results_head {
background-image: url(images/button_rest.gif);
text-align: center;
color: #fff;
width: 630px;
border-left: 1px solid #000;
border-top: 2px solid #000;
border-right: 1px solid #000;
padding: 2px;
}

#results {
border: 1px solid #000;
width: 630px;
padding: 2px;
}

.team {
text-align: center;
border: 1px solid #000;
width: 200px;
margin: 2px;
padding: 2px;
float: left;
}

Breakdown of the offending code

<div id="results_head">Search Results:</div>
      <div id="results"> 
              <? PHP Loop query results {
              echo "<div class=\"team\">$team</a></div>";
              }?>
      </div>

Variable $team is being populated from enteries in a database, I want to have 3 of the child test class div's in each row of the parent results div.

The parent border shows around the childs results in IE, but in Firefox, there is a little line at the top of the parent border and the results from the loop show up within the physical boundaries of the parent div, just with no border around them...

 

[Vragabond]

#results {
border: 1px solid #000;
width: 630px;
padding: 2px;
[b]overflow: auto;[/b]
}

Add the code in bold to your css. Floated elements do not contribute to parents height unless explicitly specified.

 

[OrganizedChaos]

Thank you!! That did it.