How to fix size of child divs with content into parent div?

Question

I have some issues with div sizing when I resize browser window. I want child divs always remain inside the parent div and decrease in size proportionally to parent div when browser window resizing. I guess it should be a javascript but I dont know which one exactly and how to use it. Any advice will be appreciated!

     #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

To be able to affect to the parent div the #child2 should be position: relative; like this:

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

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

Answer 2

Try changing the styles for both children to the following:

#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;
}