Как исправить размер дочерних div с содержимым в родительский div?

Question

У меня есть некоторые проблемы с размером div при изменении размера окна браузера. Я хочу, чтобы дочерние div всегда оставались внутри родительского div и уменьшались в размере пропорционально родительскому div при изменении размера окна браузера. Я предполагаю, что это должен быть javascript, но я не знаю, какой именно и как его использовать. Любые советы будут оценены!

 #parent 
    { 
    position: fixed; 
    width: 100%; 
    height: 11%; 
    background-color: white; 
    left: 0; 

    } 

    #child1 
    { 
    left: 100px; 
    position:absolute;  

    } 

    #child2 
    { 
     position: absolute; 
     left: 700px; 
     margin-top: 15px;  
     font-size: 1.5em; 

    } 



    <div id="parent"> 

      <div id="child1"> 
     <a> <img src="img\linkedin.png" alt="jhj" width="200px;" height="70px;" /> </a> 

      </div> 

      <div id="child2"> <a>Home</a> <a>Examples</a> <a>Tricks</a> <a>Contact us</a> 
      </div> 
    </div> 

Answer 1

Чтобы иметь возможность влиять на родительский DIV # Child2 должен быть position: relative; так:

#child2 { 
    position: relative; 
    top: 15; 
    margin-top: 0; 
    } 

https://jsfiddle.net/eapo/1tkqsm5q/

Answer 2

Попробуйте изменить стили для обоих детей к следующему:

#child1 { 
    left: 100px; 
    position:absolute;  
    width: 50%; 
} 

#child2 { 
    position: absolute; 
    right: 0; 
    margin-right: 20px; 
    text-align: right; 
    width: 50%; 
    margin-top: 15px; 
    font-size: 1.5em; 
}