Fixing the the float container in HTML

Had a problem where i had 2 floating divs inside a container box that had a visible border.  It wasn’t forcing the container box height correctly.

Found the solution here..(thanks to Holly ‘n’ John)

To summarise…the CSS class you need is as follows:

clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

This gets added to your outer container e.g.

  <div class="clearfix" >
    <div style="float:left"><p>some text</p></div><div style="float:left; padding-left:5px"><p>some text</p>
    </div>
</div