Iframe overlapping div issue

HTML & CSS
1

Using IE8, on this page, the Facebook comments iframe overlaps the footer div.

Screenshot:

Is there a way to prevent this overlapping?

2

The styles kept changing as I was looking, but anyhow, there are various ways to stop that, such as unfloating the comments box:


.fbcomments {
  [s][COLOR="#FF0000"]float: left;[/COLOR][/s]
  margin-bottom: 30px;
}

Or you could set the footer to clear: both. Of force the containers of the comment box to overflow: hidden or place the clearfix style on them. Lots of options. :slight_smile: (Putting a height on the container is not a good idea.)

3

I tried to apply clear:both to the footer and clearfix styles on the comment box, but the comment box still overlaps.

But if I place the iframe comment box outside of the “dg-content-container” div, then it works without any overlapping (however, this seems like a crude fix as I will need separate margin css fixes for the various browsers).

4

Quite a weird issue. I’ve done multiple things to solve this, however none of it makes sense. I’m posting because are you modifying hte page? Now the comment box isn’t appearing for any browser.

5

You can try giving the iframe a class like <iframe class=“facebook”…>…</iframe> and then assigning a width and height attribute on your CSS sheet. If you keep the float, apply the clear:both to your footer, or use a clear div (<div class=“clear”></div>) right after the iframe that has no attributes other than the clear:both.