CODEWITHSUNDEEP
css
mtay
mtay

Reputation: 1316

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!

Upvotes: 0

Views: 6138

Answers (4)

Avatar
Avatar

Reputation: 15156

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;
}

Upvotes: 0

John
John

Reputation: 17471

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>

Upvotes: 6

wdm
wdm

Reputation: 7189

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/

Upvotes: 0

kobe
kobe

Reputation: 15835

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;
    }

Upvotes: 1

Related Questions