jQuery and CSS: containing floats

Containing CSS floats can be a really tedious task. Basically, every container with floats should have a rule like the following:

.clearfix {
  overflow: hidden;
  height: 100%; /* IE6 */

But with jQuery we can easily avoid to add this class to the markup with a few lines of code:

$(document).ready(function() {
  $('*').each(function() {
    var $element = $(this);
   if($element.css('float') !== 'none') {

That's all! By doing so, we keep our markup intact and we spare a lot of time! Do more with less: that's jQuery's motto. Isn't it amazing?

Leave a Reply

Note: Only a member of this blog may post a comment.