float doesnt contain inner div's

by kneidels

HTML

<div class="itemrow error">
         <div class="rownumber"></div>
         <div class="rowtitle"><a href="/documents">Medical form signed by doctor</a></div>
         <div class="rowstatus"> 
                  Some
                    information is missing. 
                    <div id="docformcont" style="padding: 5px; border: 1px solid rgb(102, 102, 102); background: rgb(238, 238, 238); margin-top: 5px;">
                <a href="Medical-Form.pdf" target="_blank"><strong>Download the Medical Form</strong></a>. This must be given to your doctor for filling out, and then uploaded here.
                        
             </div>
                     <br clear="all">
                    
                    </div> <br clear="all"></div>

CSS

.itemrow { clear: left; padding: 5px 0; background: #BED6FB; font-weight: bold; height: 28px; margin-bottom: 2px;   overflow: auto;
   height: auto !important;} 
    .itemrow.error { background: #FBD5D5}
    .itemrow.success { background: #ACF5AB;}
.rownumber { padding: 5px 0; width: 5%; float: left;} 
.rowtitle { padding: 5px 0; width: 40%; float: left;} 
    .rowtitle a { display: block; width: 100%;}    
.rowstatus { padding: 5px 0; width: 55%; float: left;}