reCAPTCHA changing the height of my content by about -20px

Without reCAPTCHA, my page looks like this (jsfiddle):

<html>
<body>

<div class="content_wrap">
    <div class="left_container">
    </div>

    <div class="right_container">
        <div style="background-color: blue; margin:0px; height: 1500px;">
        <!--RECAPTCHA WOULD GO HERE-->
        </div>
    </div>

</div>

</body>
</html>

CSS:

body,html {
    height: 100%;
    width: 100%;
    background-color: #f8f8f8;
}

div.content_wrap {
    width: 100%;
    position: relative;
}

div.left_container {
    float:left;
    position:absolute;
    width: 220px;
    min-height: 100%;
    background-color: red;
}

div.right_container {
    position: relative;
    padding: 0px;
    margin-left: 220px;
    width: 1000px;
}

With reCAPTCHA (in the blue area) the height of the entire page's content is reduced by ~20px at the bottom with a visible strip of white space.

Has anyone had problems with reCAPTCHA altering elements of their layout?

Solution

I've been able to replicate your issue based on this reCAPTCHA jsfiddle example.

It looks like reCAPTCHA causes an empty iframe to be appended to the bottom of the page.

<iframe src="about:blank" style="height: 0px; width: 0px; visibility: hidden; border: none;">
    This frame prevents back/forward cache problems in Safari.
</iframe>

A Google search on the message in the iframe results in a lot of discussion on the issue.

And here's a solution found on SO: Recaptcha creates iFrame on page, breaks styling

Try the CSS below:
/* ReCaptcha Iframe FIX */
iframe {display:none !important;}
header iframe,
section iframe,
footer iframe,
div iframe { display:inline; }
If you don't have any other frames on the site to worry about, a simpler version should suffice:
iframe {display:none !important;}

Finally, here's the jsfiddle with the solution implemented: http://jsfiddle.net/BXufS/7/.