title: position buttons directly under each other with html or/and css
body: <p>I have the following html script.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;head&gt;
   {% load staticfiles %}
   &lt;link rel="stylesheet" type="text/css" href="{% static 'sslcert/style.css' %}" /&gt;
   &lt;script type="text/javascript"&gt;
          function oeffnefenster(url){infopopup =  window.open(url, "fenster1", "width = 700, height = 600, status=yes, scrollbars=yes, resizable=yes")}
          infopopup.focus()
   &lt;/script&gt;
   &lt;script type="text/javascript"&gt;
          function erfolgreich(url){infopopup =  window.open(url, "fenster1", "width = 700, height = 600, status=yes, scrollbars=yes, resizable=yes")}
          infopopup.focus()
   &lt;/script&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
  &lt;div class = "compprologo"&gt;
    &lt;a href = "http://www.comp-pro.de"/&gt;
    &lt;img src = "{% static 'sslcert/logo_comppro.png' %}"/&gt;
   &lt;/a&gt;
  &lt;/div&gt;
  &lt;div class = "table"&gt;
   &lt;table border = "0"&gt;
      {% for file in files %}
     &lt;tr&gt;
      &lt;td&gt; {{ file }}&lt;/td&gt; 
      &lt;td width="25%" align = "right"&gt;
        &lt;a href="http://10.0.3.186:8000/sslcert/{{ file }}" onclick="oeffnefenster(this.href);return false"&gt;
         &lt;font color = "white"&gt;Info&lt;/font&gt;
        &lt;/a&gt;
      &lt;/td&gt;
      &lt;td width="25%" align = "right"&gt;
        &lt;a href="http//10.0.3.186:8000/sslcert/{{ file }}/keyCrt"&gt;
         &lt;font color = "white"&gt;Certificate&lt;/font&gt;
        &lt;/a&gt;
      &lt;/td&gt;
       &lt;td width="25%" align = "right"&gt;
        &lt;a href="http://10.0.3.186:8000/sslcert/{{ file }}/keyDownload"&gt;
         &lt;font color = "white"&gt;SSL-Key&lt;/font&gt;
        &lt;/a&gt;
      &lt;/td&gt;
      &lt;td width="25%" align = "right"&gt;
        &lt;a href="http://10.0.3.186:8000/sslcert/{{ file }}/revoke" onclick="erfolgreich(this.href);return false"&gt;
         &lt;font color = "white"&gt;Revoke&lt;/font&gt;
        &lt;/a&gt;
      &lt;/td&gt;
     &lt;/tr&gt;
     {% endfor %}
    &lt;/table&gt;
  &lt;/div&gt;
  &lt;div class="AddSSL"&gt;
   &lt;form action = "adduser.html" method = "post"&gt;{% csrf_token %}
    &lt;input type = "submit" name = "form" style = "width:8%" value = "Add SSL-Key" class = "AddSSL"&gt;
   &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class="Downloadcrl&gt;
   &lt;form action = "Download crl.pem" method = "post"&gt;{% csrf_token %}
    &lt;input type = "submit" name = "form" style = "width:8%" value = "Download crl.pem" class = "Downloadcrl"&gt;
   &lt;/form&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This is how my css looks like:</p>
  
  <pre><code>body {
          background: url("body_bg_noise.png") repeat;
          overflow-y:scroll;
  }
  .AddSSL {
          position: fixed;
          top: 0.8%;
  }
  
  .Downloadcrl {
          position:fixed;
          top:4%;
  }
  
  .info {
          position:fixed;
          top:5%
          width: 30%;
  }
  
  
  
  .table {
  
          color: white;
          margin-left: auto;
          margin-right: auto;
          width: 80%;
          background: black;
          border: 1px;
          -webkit-border-radius: 10px;
          -moz-border-radius: 10px;
          -border-radius: 10px;
          border-radius: 10px;
          top:50%;
  }
  
  .idundpw {
          margin-left: auto;
          margin-right:auto;
          width: 80%;
  }
  
  ul {
          list-style-type: circle;
  }
  
  .compprologo {
          margin-left: auto;
          margin-right:auto;
          text-align:center;
          width:80%;
          background:white;
          border: 1px;
          -webkit-border-radius: 10px;
          -moz-border-radius: 10px;
          -border-radius: 10px;
          border-radius: 10px;
  }
  a:link {text-decoration:none;}
  </code></pre>
  
  <p>If you used my Monitor (1280x800), that would look delicious :P But when you would use a Monitor that is a bit smaller the two buttons: <em>Add SSL-Key</em> and <em>Download crl.pem</em> would be mixed together, because I used some pretty random percentages by who just have a synergy with my monitor size. My plan is to change the html or css, so I have these both buttons laying under each other. This is how it looks like currently: <img src="https://i.stack.imgur.com/SYHa5.png" alt="enter image description here"></p>