KhmerAK* | Active Koder

This is a little CSS tip that you will find it useful when you working with floating objects on you presentation page. So when do you need to float the objects while styling the html page? Probably you are laying out the page with CSS which is commonly used for two or three conlumns layout, or you just want to display the data as column without using table. Floating technique is right for these. Let say we have a container box called “container”, and within this container there are two more sub container boxes which we will used it to contain two different contents. So we’ll have html code like this:

<div id="container" class="clearfix">
<div id="sub-container1">Block content 1</div>
<div id="sub-container2">Block content 2</div>
</div>

Without style container will display as block of “sub-container1″ and the “sub-container2″ as defaut order from top to bottom. But if we want the two sub-container to display as conlumn we need to style (CSS) which it looks like this: (in your css file add the following code)

#sub-container1{float:left; width:200px;}
#sub-container2{float:left; width:200px;}
.clearfix:after {
content:".";
display:block;
height:0;
clear:left;
visibility:hidden;  }

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

sub-container1 and sub-container2 will float to left with 200 pixels width display as column within the container box which have clearfix class applied so that the two floating boxes has its height otherwise we’ll see the contents messup on the page because floating object doen’t height unless we set it or use other object at the bottom of it to clear the float like we’re setting auto height to it. So (.clearfix:after) uses the :after pseudo-element to generate content after our containing block, and the declarations create the content (a period in this case), change the display from the default inline to block (the clear property cannot be applied to inline elements), make the generated content disappear (height:0; and visibility:hidden;) and (clear:left) to clear the object that are floating on the left, or clear:right if the objects are floating on the right or clear:both. * html .clearfix { height:1%; } is a little more tricky when we want display well in all browser especially Internet Explorer (IE) and Safari on Mac because both need a special setting rather than others like firefox or opera. Sends a height of 1% to give the container element “layout,” which causes IE to expand the container div to surround the floated box. And it is a holly hack you should have noticed when working with IE, later if you have problem with div container that does not display the object properly on IE you probably have not set it height to some pixel or set it to 1%. Sould like you’re cheating em? hehe… cheating IE. Well, that’s it for the floating! If you have any other ideas you’ve experienced please feel free to share me too.

This entry was posted on Wednesday, June 13th, 2007 at 4:59 pm and is filed under Webdesign. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.