the css property "clear" leaves a huge empty space

I am simply using a div of this nature to clear an area after floats:

.clear {
clear:both;
}

however, I am seeing it is causing a big space in my formatting and I'm not sure how to rid of it. what do you think may be happening?

thank you!

In case anyone else runs into this problem, the solution is to add this to the group's parent; that is the element that is causing the problems:

overflow: auto

i.e.:

<div style="overflow: auto">
   <div style="float: right">Testing</div>
   <div style="clear: both"></div>
</div>

Try to use a line height , it should fix the problem.

Is it happening only on IE , if so add line height

do something like this

.clear {
        clear: both;
        height: 0px;
        overflow: hidden;
    }

I would just apply the clear: both attribute to the next content element (i.e. div) instead of creating an empty div (which I'm assuming that you are doing).

Demo: http://jsfiddle.net/wdm954/ArDhF/1/

I had the same problem with several small left-floating tables next to each other. The clear div afterwards took a lot of white space without having any height, nor padding or margin.

The solution: Wrap all tables within a div, then assign overflow-hidden to that div and (this is important) a value for the height.

E.g.

.tablecontainer {
    height: 70px;
    overflow: hidden;
}