title: Aligning dynamically created buttons vertically
body: <p>So I'm trying to make a page for stuff, and I'm at a decent stage. I hit a roadblock on, of all things, trying to vertically align buttons I create using javascript in the document. </p>
  
  <p>I've tried numerous things like throwing display style: block; just about everywhere I can, but the buttons simply refuse to work with me. </p>
  
  <p>I was able to make a function where the buttons would be built into a list instead, but because they lost the outlook of buttons (though they still functioned like they had to) I decided to scrap the solution.</p>
  
  <p>For some reason JSFiddle doesn't show the buttons, but here's the code I'm running and trying to work with. </p>
  
  <p><a href="https://jsfiddle.net/jets29sy/8/" rel="nofollow noreferrer">https://jsfiddle.net/jets29sy/8/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var URLobj = {
    linkname1: "https://stackoverflow.com/",
    linkname2: "https://www.google.com",
    linkname3: "https://en.wikipedia.org/"
  };
  
  function exitbutton() {
    var textelement = document.getElementById("text");
    textelement.style.display = "block";
  
    var buttonelement = document.getElementById("buttons");
    buttonelement.style.display = "block";
  
    var headerelement = document.getElementById("header");
    buttonelement.style.display = "block";
  
    var iframe = document.getElementById("iframeID");
    iframe.src = "#";
    iframe.style.display = "none";
  
    var exitbutton = document.getElementById("buttonID");
    exitbutton.style.display = "none";
  }
  
  function iframeLoaded() {
    var iframeID = document.getElementById("iframeID");
    iFrameID.height = 0;
    iFrameID.width = 0;
  
  } // add to game // parent.iframeLoaded();
  
  function add(name, URL) {
    var element = document.createElement("button");
  
    //Assign different attributes to the element.
    element.setAttribute("value", URL);
    element.setAttribute("id", "gamebutton");
    element.innerHTML = name;
    element.onclick = function() {
      document.getElementById("iframeID").src = this.getAttribute("value");
      document.getElementById("iframeID").width = "95%";
      document.getElementById("iframeID").height = "95%";
      document.getElementById("iframeID").style.display = "block";
  
      var exitbuttonelement = document.getElementById("buttonID");
      exitbuttonelement.style.display = "block";
  
      var textelement = document.getElementById("text");
      textelement.style.display = "none";
  
      var buttonelement = document.getElementById("buttons");
      buttonelement.style.display = "none";
  
      var headerelement = document.getElementById("header");
      buttonelement.style.display = "none";
    };
  
    var foo = document.getElementById("foobar");
  
    //Append the element in page (in span).
    foo.appendChild(element);
  }
  
  window.onload = function() {
    for (var key in URLobj) {
      if (URLobj.hasOwnProperty(key)) {
        add(key, URLobj[key])
      }
    }
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#buttons {
    vertical-align: right;
    float: right;
    display: block;
  }
  
  #foobar {
    display: block;
  }
  
  #text {
    vertical-align: right;
    float: left;
    text-align: left;
  }
  
  #buttonID {
    float: right;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head scroll="no"&gt;
    &lt;link rel="stylesheet" href="page.css"&gt;
    &lt;script type="text/javascript" src="page.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body scroll="no"&gt;
    &lt;div id="header" , style="block"&gt;
      &lt;h2&gt;Your links are located here.&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div id="buttons" , style="display: block"&gt;
      &lt;span id="foobar" style="block"&gt;&amp;nbsp;&lt;/span&gt;&lt;br/&gt;
    &lt;/div&gt;
    &lt;div id="exit"&gt;&lt;button type="button" id="buttonID" style="display: none" onclick=exitbutton()&gt;Exit link!&lt;/button&gt;&lt;/div&gt;
    &lt;div class="frame_div" , background-color="blue"&gt;
      &lt;iframe id="iframeID" , width="0" , height="0" , align="middle"&gt;&lt;/iframe&gt;
    &lt;/div&gt;
    &lt;div class="text" , id="text" , style="block"&gt;
      &lt;tr&gt;
        &lt;th&gt;Choose your link from the list.&lt;br&gt;&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I run it locally, I do see everything I need to see, but my buttons are aligned horizontally instead. The location of the buttons div isn't so important now, all I want to figure out is how I can align the buttons vertically in the  I'm storing them in, either by using javascript, html or css. </p>