2

I used to add a <div style='clear:both'></div> to clear floats from previous segments, but someone suggested I should use overflow:auto on the <div> with floats instead as it's simpler and more clean.

Problem is, I got reports that there were some strange 'shades' in my website. After investigating, it turns out it happens in Chrome, not in Firefox, and those 'shades' are actually very small scrollbars.

I tried to reduce the parts to a minimum in this jsfiddle http://jsfiddle.net/57HM3/4/ . note they are far to the right (by where it says 'Result'). It seems to have to do with the line-height, if I set it to 1.2 instead of 1.1 it disappears. Is this some sort of known issue (that I don't know about)?

I know there are other ways to clear them but they involve IE specific codes and what not. I'd like to keep it as it is, just making the div with the floats as overflow:auto (and if this doesn't work, I'd rather go back to my adding the extra <div>

Rodolfo
  • 4,155
  • 23
  • 38

3 Answers3

4

add overflow:hidden instead of. This will clear your both and will not add any scroll

Jitender
  • 7,593
  • 30
  • 104
  • 210
  • but will it grow to hold the floats (without me specifying the height)? And why does `overflow:auto` add scrollbars anyway since I'm not restricting heights anywhere? – Rodolfo Aug 06 '12 at 14:43
  • yes it works in the fiddle. I still don't know why would `overflow:auto` add them though since there is no height specified, is it a bug? – Rodolfo Aug 06 '12 at 14:47
  • 1
    default height of div is around 20px. So if div contains greater then 20px height then it will scroll. – Jitender Aug 07 '12 at 05:26
2

Don't monkey with overflow. I'd recommend a "clearfix" solution. Here's what I use, I put it at the top of all my style-sheets from the beginning of each project:

/* CLEAR-FIX */
.clearfix:after { 
    visibility: hidden; display: block; font-size: 0; 
    content: " "; clear: both; height: 0; 
}
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

...got that off a blog so long ago I can't remember where.

Any container that needs to grow with floats just needs the "clearfix" class added:

<div class="test" class="clearfix">
    <div style="float:left">Hello</div>
    <div style="float:left">World</div>
</div>

BTW, if you're wondering why CSS is such that floats aren't normally counted as part of a parent's height, see: Why do non-floating parents of floating elements collapse?

Community
  • 1
  • 1
Faust
  • 15,130
  • 9
  • 54
  • 111
0

If you want to keep the overflow:auto rule for the container div, you can try removing the line-height rule from the .test class.

caoquendo
  • 496
  • 4
  • 5