0

I have a "Content" div, which within itself contains 3 divs that float:left. Below that is the footer.

Now the footer has a border-top:10px which you'll see is hidden behind the content div. This is because the content div does not adjust it's height because it's content is floating.

To fix this I do

overflow:hidden

Here's the problem, while this fixes the height problem, it causes another issue. The 3 floated divs have a box-shadow on them, and when the "content" container's overflow is hidden, it chops off the outside shadows.

Here's the jsfiddle http://jsfiddle.net/rhPCE/2/ as you'll see, the box-shadows are chopped off on the outside, and if you remove the overflow:hidden; from #content it fixes the shadows but breaks the positioning of the footer div.

Any ideas? Thanks in advance!

ipixel
  • 519
  • 8
  • 21

1 Answers1

2

When you float elements, the parent container naturally collapses because floated elements exist outside the normal document flow.

To fix this, you can apply a clearfix to the #content container:

  1. Remove overflow: hidden; from #content
  2. Include a clearfix, such as this: A new micro clearfix hack
  3. Apply the clearfix class to the #content div, like this: <div id="content" class="cf">

After this, your parent container #content will expand to the height of the tallest floated element.

Working Example: http://jsfiddle.net/rhPCE/3/

Community
  • 1
  • 1
Axel
  • 10,732
  • 2
  • 30
  • 43
  • That worked fantastically! It's a shame it need to be hacked to work properly! THANKS!!!!! – ipixel Jan 09 '14 at 19:52
  • 1
    It's not necessarily a hack. Clearing floats is standard practice for dealing with collapsing parent elements ;) – Axel Jan 09 '14 at 19:59
  • yea but faking empty content kind of is. I initially tried applying clear:both to #content but that wasn't effective on it's own. – ipixel Jan 09 '14 at 20:00
  • Well use floats to layout placement could also be considered a hack, as it was never really intended for it. It's meant for floating images and content and having other content wrap around it (hence why it doesn't count towards the parent's height). If you're not a fan of using a `.clearfix`, I'd recommend looking into using `display: inline-block;` as an alternative to stacking elements side-by-side. Just keep in mind that `display: inline-block;` isn't supported in older, non-modern browsers (IE6, IE7). – Axel Jan 09 '14 at 20:21