Dec 6

Written by: Soul Solutions
Wednesday, 6 December 2006 

BronwenWeeGo.jpgHad 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

 

Tags:

Your name:
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
Enter the code shown above in the box below
Add Comment   Cancel 
Copyright © 2002-2009 Soul Solutions Pty Ltd. | Login