title: dynamic css circle navigation
body: <p>This question is a follow-up question (not sure if thats allowed) on something I asked earlier -> <a href="https://stackoverflow.com/questions/34307941/dynamic-css-circle-inside-div">dynamic css circle inside div</a></p>
  
  <p>The solution to that thread turned out not be what I wanted to achieve since I need the divs adjacent to the centered circle to be independent of it in order not to be affected by styles such as opacity i want to apply to the circle.</p>
  
  <p>What I want to create is a page in which I have a fixed header and footer and a circle in the content area that dynamically changes size depending on the space available - i dont want to user to scroll.</p>
  
  <p>Abovementioned circle has a div (the navigational part) on either side that will also change size. </p>
  
  <p>The code that I have so far seems to work as expected when the x-axis of the wrapper is bigger than the y-axis (width > height) but for some reason when the height of the wrapper is bigger than width, it gets all distorted.</p>
  
  <p><a href="https://jsfiddle.net/h1xfqwh6/" rel="nofollow noreferrer">https://jsfiddle.net/h1xfqwh6/</a></p>
  
  <p>looking at in in fiddle it actually looks half decent - besides the hidious colors - which are a feature... but if i look at in the firefox responsive design developer mode the circle takes always more space than it should when the wrapper containers height is larger than its width - </p>
  
  <p><a href="https://i.stack.imgur.com/vTH7L.png" rel="nofollow noreferrer">oversized circle</a></p>
  
  <p>html</p>
  
  <pre><code>    &lt;div class="wrapper"&gt;
          &lt;div id="left"&gt;&lt;i class="fa fa-arrow-left"&gt;&lt;/i&gt;&lt;/div&gt;
              &lt;div id="circle"&gt;
                      &lt;p&gt; Make me into a real circle &lt;/p&gt;
               &lt;/div&gt;
          &lt;div id="right"&gt;&lt;i class="fa fa-arrow-right"&gt;&lt;/i&gt;&lt;/div&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code> .wrapper {
   top: 4em;
   bottom: 4em; 
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%);
   position: absolute;
   max-height: 100%;
  background-color: blue;
   margin: 0 auto;
   padding-top: 1em;
   padding-bottom: 1em;
  }
  
  
  
  #left{
  background:#00ffff;
  height: 100%;
  border: 1px black solid;
  display: inline-block;
  }
  
  #right{
  background:#00ff03;
  display: inline-block;
  height: 100%;
  float: right;
  text-align: right;
  border: 1px black solid;
  
  }
  
  #circle {
   position: absolute;
   top: 50%;
   left: 50%;
  transform: translate(-50%, -50%);
   display: inline-block;
   min-width: 5em;
  height: 100%;
  border-radius: 50%;
   width: 50%; 
   background-color: green;
   background-image: url('http://i.stack.imgur.com/MlIL8.png');
    background-repeat: no-repeat;
   background-size: 100%;
   border: black 2px solid; 
   }
  </code></pre>
  
  <p>jquery</p>
  
  <pre><code>function f() 
  {
  
  
  if($('.wrapper').height() &gt; $('.wrapper').width()) 
  {
      $('#circle').height($('.wrapper').width() - $('#left').width() - $('#right').width());      
      $('#circle').width($ ('.wrapper').height() - $('#left').width() - $('#right').width());
      $('.wrapper').width($('#circle').width() + $('#left').width() + $('#right').width()); 
  
  
  }
  else if( $('.wrapper').width()  &gt;  $('.wrapper').height() )
  {
      $('.wrapper').width($('#circle').width() + $('#left').width() + $('#right').width());
      $('#circle').width($('.wrapper').height() );
      $('#circle').height($('.wrapper').height() );
  
  }
  $('#circle').height($('#circle').width());
  
  }
  f();
  $(window).on('resize', function() {
  f();
  });
  </code></pre>