При изменении разрешения изображения налево, текст, кнопка на изображении и нижнем колонне оказываются затронутыми

Question

Есть два div в контейнере, слева & Справа, слева есть изображение в фоновом режиме & текст и кнопка на нем & в правой есть регистрация форма, когда я изменяю разрешение браузера, содержимое справа правильно меняет свое разрешение, а оставшийся затронутый нижний колонтитул & содержание слева тоже отображается неправильно.

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

Вот Updated JSFiddle. Просто удалил position: absolute для логина и поля для нижнего колонтитула. Если хотите скрыть div, используйте display:none не visibility:hidden. Потому что он будет скрыт, но он займет место.