When Left-Side Image resolution change, Text, button on Image and Footer get affected

Question

There are two div in container, Left & Right, in left there is image in background & text and button on it & in right there is registration form, when i change resolution of browser, the content of right is changing correctly it's resolution while left affected footer & the content on left is also displaying improperly.

HTML

<div class="container">
    <div class="content-left">
        <img src="images/image.jpg">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        <a class="more" href="about.php">LEARN MORE</a>
    </div>
    <div class="content-right">
        <section>
            <div id="container_demo">
            // WRAPPER - CODE OF REGISTRATION FORM
            </div>
        </section>
    </div>
    <div class="clear"></div>
</div> // Container END
<div class="footer">
    <p>
        <a href="#">qqqqqq </a>
        <a href="#">rrrrrr </a>
        <a href="#">tttttt </a>
        <a href="#">hhhhhhh </a>
        <a href="#">trtrtrtr </a>
        <a href="#">fdfdffd </a>
        <a href="#">sssssss </a>
        <a> - </a>
        Copyright Text
    </p>    
</div>

CSS

@media (min-width: 875px) {  
    .container {
        width: 100%;
    }
    .content-left {
        width: 50%;
        height:100%;
        float: left;
        position: relative;
    } 
    .content-right{
        width: 50%;
        height:100%;
        float: right;
    }
    .content-left img{
         visibility:visible;
         height:100%;
         width:100%;
    } 
    .content-left p {
        position: absolute;
        top: 30%;
        left: 40%;
        -ms-transform: translate(-40%, -40%);
        transform: translate(-40%, -40%);
        color: #FFF;
        font-family: Bookman Old Style;
        font-size: 20px;
        line-height: 45px;
        width: 92%;
    }    
    .content-left a.more {
        position: absolute;
        top: 62%;
        left: 32.7%;
        -ms-transform: translate(-32.7%, -60%);
        transform: translate(-50%, -60%);
        padding: 13px 40px;
        border-radius: 3px;
        font-size: 16px;
        font-family: 'Montserrat', sans-serif;
        font-weight: bold;
        color: #2a2344;
        background-color: #FFF;
    }
    .footer {
        text-align: center;
    }
    .footer p {
        color: #CCC;
        line-height: 25px;
        font-size:90%;
    }
    .footer a {
        color: #CCC;
        text-decoration: none;
        font-size:85%;
        padding-right:0.5%;
    }
    .footer a:hover {
        color: #FFF;
        font-size:80%;
    }
}

Answer 1

Here is the Updated JSFiddle. Just removed position: absolute for the login div and margin for the footer. If want hide div use display:none not visibility:hidden. Because it will hidden but it will occupay space.