title: Make button same width as height
body: <p>I have a toolbar on the top of my website, which is a <code>fixed div</code>. In there I have another <code>div</code>, with some buttons in it:</p>
  
  <pre><code>|somethingsomething.com                                       |
  ---------------------------------------------------------------
  |statusBar____________________________________________|buttons|
  |rest of website                                              |
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="statusBar"&gt;
      &lt;div class="statusBarMenuButtons"&gt;
          &lt;form class="homeButtonForm" action="?id=1" method="post"&gt;&lt;button class="homeButton"&gt;&lt;/button&gt;&lt;/form&gt;
          &lt;form class="subscriptionsButtonForm" action="?id=2" method="post"&gt;&lt;button class="subscriptionsButton"&gt;&lt;/button&gt;&lt;/form&gt;
          &lt;form class="searchButtonForm" action="?id=3" method="post"&gt;&lt;button class="searchButton"&gt;&lt;/button&gt;&lt;/form&gt;                   
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:  </p>
  
  <pre><code>div.statusBar{  
      position:fixed;
      top:0;
      width:100%;
      height:5%;
  }
  
  button{
      height:100%;
      margin-right:10px;
  }
  
  form{
      height:100%;
  }
  
  /* This is the same for all buttons, just different background-images */
  button.homeButton{
      background:url(../resources/homeButton.png) no-repeat;
      background-size:auto 100%; /* width height */
  }
  </code></pre>
  
  <p>Now, my problem is that I have no way of knowing which <code>height</code> the button will get, and therefore cannot know which <code>width</code> I should specify.</p>
  
  <p>I have search a lot on this website and Google and found lots of answers about <code>div</code>s, also I found this <code>jQuery</code>:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var height = $('button.homeButton').height();
      $('button.homeButton').css({
          'width' : height + 'px';
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>But it does not seem to work. I have pulled this snippet form <a href="https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout">here</a> and thought maybe the problem was that I am using a button instead of a div.</p>
  
  <p>Help is very much appreciated.</p>