I aplied the clearfix hack to all my block-level containers in CSS file.

[terungwa]

I am converting the 960 grid by Nathan Smith to a fluid grid. To apply the clearfix hack, I applied the hack to all block level elements. This is the code below:
/**************************************************
Clearfix: contain floats
**************************************************/

.clearfix:before,
.clearfix:after,
.container_12:before,
.container_12:after ,
.grid_12:before,
.grid_12:after,
.grid_11:before,
.grid_11:after,
.grid_10:before,
.grid_10:after,
.grid_9:before,
.grid_9:after,
.grid_8:before,
.grid_8:after,
.grid_7:before,
.grid_7:after,
.grid_6:before,
.grid_6:after,
.grid_5:before,
.grid_5:after,
.grid_4:before,
.grid_4:after,
.grid_3:before,
.grid_3:after,
.grid_2:before,
.grid_2:after,
.grid_1:before,
.grid_1:after,
nav:after{
content: ‘.’;
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}

.clearfix:after,
.container_12:after ,
.grid_12:after,
.grid_11:after,
.grid_10:after,
.grid_9:after,
.grid_8:after,
.grid_7:after,
.grid_6:after,
.grid_5:after,
.grid_4:after,
.grid_3:after,
.grid_2:after,
.grid_1:after,
nav:after{
clear: both;
}

/*
The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix,
.container_12,
.grid_12,
.grid_11,
.grid_10,
.grid_9,
.grid_8,
.grid_7,
.grid_6,
.grid_5,
.grid_4,
.grid_3,
.grid_2,
.grid_1,
nav {
zoom: 1;
}

Is this solution workable?
Your opinions are appreciated.

Thanks.

[Paulie_D]

Seems overly verbose.

You’re applying ‘styling’ to every selector whether it needs it or not.

I’m pretty sure that this would have a performance hit. Whether it’s noticeable or not is something that should be tested.

[terungwa]

Thank you Paulie_D for your feedback.

[Author]

Posts