title: how to add css padding for button such that it is consistent with column width?
body: <p>i'm having this problem where i cannot make the padding of a button constant with the column width. it is necessary for me because when a user is to hover onto the button, it changes background. but if i use a static value for the button padding width, it will get distorted once anyone zooms in our out two three levels. i tried to use the values as %, but to no avail. help will be much appreciated!</p>
  
  <p>you may easily try out my code on ur own pc and see what i'm talking about:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
  
      &lt;title&gt;Welcome!&lt;/title&gt;
      &lt;!--&lt;link rel="shortcut icon" href="#" /&gt;--&gt;
      &lt;link rel="stylesheet" href="styles.css" type="text/css" /&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;center&gt;
          &lt;div id="main"&gt;
              &lt;div id="header"&gt;
              &lt;/div&gt;
              &lt;div id="menupane"&gt;
                  &lt;center&gt;&lt;a href="#" class="buttons"&gt;Home&lt;/a&gt;&lt;/center&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/center&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#main
  {
      width: 80%;
      height: 590px
  }
  
  #header
  {
      background-color: #1f3568;
      height: 12%;
  }
  
  #menupane
  {
      background-color: #cfd3db;
      height: 85%;
      width: 8%;
      float: left;
  }
  
  .buttons
  {
      color: #1f3568;
      text-decoration: none;
      margin-right: 0px;
      line-height: 40px;
  }
  
  .buttons:hover
  {
      background-color: #677ba7;
  }
  </code></pre>
  
  <p>thanks in advance</p>