title: Trying to align upload button with a Textarea in HTML and CSS
body: <p>I'm making a webpage for one of my projects and I'm trying to align the Upload buttons beside a text field. Maybe better explained as a picture. You can see that the two buttons are aligned on the bottom left of the submit button. I want it to be aligned on the left of the device Id text field. I've tried setting the display attributes for the text field, as well as the two buttons but it didn't work. I tried setting the float properties, which also didn't work. I was looking at grids I could possibly use from Purecss.io, but I'm not sure if that would fix the problem. I've tried using vertical-align attribute, still no dough.
  I'm using a plain bootstrap theme. My HTML skills are pretty basic coming from Java. Anyone know what I can do here?</p>
  
  <p>Here is my main container:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;!-- Main content here --&gt;
  
  
  &lt;div id="main"&gt;
      &lt;h1 id="mainheader"&gt;Send an image to a Wearable device&lt;/h1&gt;  
      &lt;hr&gt;
  
      &lt;form method="post" action="/gcm/gcm.php/?push=true" onsubmit="return checkTextAreaLen()"&gt;                                                                
          &lt;textarea id="deviceID" rows="1" name="message" cols="25" placeholder="Device ID"&gt;&lt;/textarea&gt; &lt;br/&gt;
          &lt;button type="submit" id="mainbutton" class="button-xlarge pure-button"&gt;Send Image&lt;/button&gt;
      &lt;/form&gt;
  
      &lt;form action="upload.php" method="post" enctype="multipart/form-data"&gt;
          Select image to upload:
          &lt;div id="filebutton"&gt;
          &lt;input type="file" name="fileToUpload" id="fileToUpload"&gt;
          &lt;/div&gt;
          &lt;input type="submit" value="Upload Image" name="submit"&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here are my styles</p>
  
  <pre><code>      #main {
      vertical-align: middle;
    }
      #status{
      text-align: center;
      background-color: #FFFFFF;
      padding: 10px;
      margin-top: 25px;
      }
  
    #mainheader{
      margin-bottom: 20px;
      text-align: center;
      font-family: 'Raleway', sans-serif;
    }
    #deviceID {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
  
    #mainbutton {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
  
     .button-xlarge {
       font-size: 125%;
       width:350px;
       background: rgb(66, 184, 221); /* this is a light blue */
      }
  </code></pre>
  
  <p>Here is a preview image: (Having trouble uploading it directly)
  <a href="http://tinypic.com/view.php?pic=1z499gw&amp;s=8" rel="nofollow">http://tinypic.com/view.php?pic=1z499gw&amp;s=8</a></p>
  
  <p>EDIT:
  I somewhat fixed this by applying "float:right" on the first whole form, the text area and the button. There is still a huge horizontal between the two.</p>
  
  <pre><code>#main {
          float:right;
      }
  </code></pre>