Div Class Clear – Without the Markup

Sep

The Div Class Clear is an old trick for getting container backgrounds to stretch down to the bottom of its contents. Although there has since been a push for the “float nearly everything” technique, I’m not convinced that constantly setting floats and widths across all elements is a sustainable method. Instead, let’s address the only problem people have with the Div Class Clear method – the added markup.

We can remove this markup quite simply with jQuery. Rather than mess with the actual on-page elements, why not insert it dynamically? Check out the code:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript">
    $(document).ready(function(){
$("*:last-child").filter(function() {
return $(this).css('float') != 'none';
}).parent().append("<div class='clear'></div>");
    });
</script>
<style>
.clear {clear:both;}
</style>

Note: As you may imagine, this method assumes that the viewer has javascript enabled. Given that the downside is a matter of background stretching, and considering all the numerous other things that break when javascript isn’t enabled, I (generally) readily accept this sacrifice. After all, it’s not like Flash, where they get no content at all.

Popular Posts

Alternatively, you may want to return to the Home Page to view the most recent blog posts in order. If you have any questions, I make a point of reading and responding to all comments. Thanks for joining!

Nico

Hi,

There's a very clean way to deal with float elements and stretching the parent's background. I don't know why this is not commonly used/known. It's just THE good way to do, and I can't imagine going back to stupid solutions like "Div Class Clear" (I never liked this HTML barbarians method).

The solution is really simple : just add a "overflow: hidden" property to the parent element. That's all. And it works for all browsers !
Of course to have this working, the parent element must have "height: auto" (default value, so no height declared is ok) at least, or the element won't adapt it's height.

When you think about it, in fact this comportment is logical. You say the parent won't let his children overflow, than it manage to do so. And when elements are floating it's logical they stay visible, so the parent adapt it's height to include all floating children.

The overflow property is not known enough, and that's sad because it's really very powerful when you know how to use it. specially when you use floating elements.

Regards,

Nico

Brett Barros

I've used this method with some success. Setting aside the times it hasn't worked (maybe javascript / dynamic elements related?), I find that this still forces a manual manipulation of the code to make floats work. Needless to say, that's less than ideal.

Dave

I always use the div clear to stretch background to end of content. Great piece of code.