1 reply to this topic

[alrazy1]

• hi , see this

• 
  .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
  
  i dont understand how this decleration in css will work exactly , and why they use this trick ?!
  
  i understand that the after will place the "." or "dot" after the content of the element lets say <div class="clearfix"> Hello world</dir>
  now what i dont understand is in the document it will be "Hello world." or "Hello world" and in the next line will be a dot "." block element with hidden visibility and height = 0 ?
  
  i saw this in the css file of a tutorial in this url :
  Making A Cool Login System With PHP, MySQL & jQuery | Tutorialzine
  
  you have to download the project and look for the css file of the sliding panel folder : demo\login_panel\css\slide.css
  
  also my question is the after command will place the content as a block element after the div with the class .clearfix or it will place the dot/content inside the div after its content in next line like with <br/> or inline ??
  
  thanks.

[gokuajmes]

Div is a block level element which means it acts as a box, hence when used with class clearfix the ' . ' is moved down the box which looks like a nextline. To make it fall in same line i would recommend using the span tag and display none

<style type="text/css">
.clearfix:after
{
content:".";
display:inline;
height:0px;
clear:both;
}
</style>
<span class="clearfix">HelloWorld</span>