How to add bottom padding to a div that contains floating divs?

Question

I have a div that contains other floating divs:

<div id="parent">
  <div style="float:left;">text</div>
  <div style="float:left;">text</div>
  <div style="float:right;">text</div>
</div>

How can I add bottom padding to the parent div and make it work in IE6 (or in other words avoid the bugs in IE6)?

Thanks

Answer 1

In my CSS reset file i have a "clearfix" code:

.clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
* html .clearfix {height:1px;}

Looks weird but works great on ALL common browsers : IE6/7, FF2/3, Opera, Safari.

How to use?

Something like this:

<div class="clearfix">
    <div class="floatLeft">
        left div
    </div><!-- /.floatLeft-->

    <div class="floatRight">
        right div
    </div><!-- /.floatRight-->
</div><!-- /.clearfix-->

ATTENTION! Do NOT use clearfix class on footers (or at last element in page), otherwise you will have an ugly space under all content.