title: float puts submit button outside of div
body: <p>I am having some trouble with my css, I have a content id and then inside that I have a class that is just padding. When inside the padding class, I have a textarea and a submit button. By default, the submit button is on the left: <img src="https://i.stack.imgur.com/CUXOt.png" alt="enter image description here">
  But when I go to align the submit button to either the left or right of the content, it will go ther ebut it will also go outside of the content, like it's not part of it anymore:
  <img src="https://i.stack.imgur.com/IBbAQ.png" alt="enter image description here">
  These are my html and css codes</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="content"&gt;
          &lt;div class="content-padding"&gt;
              &lt;textarea class="content-post" placeholder="Update your status..."&gt;&lt;/textarea&gt;
              &lt;input type="submit" class="content-submit"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#content {
      width: 60%;
      background: #dddddd;
      color: #000;
      margin: 0 auto;
      border-radius: 4px;
      margin-bottom: 10px;
      height: auto;
  
  }
  .content-padding {
      padding: 10px;
  }
  .content-post {
      width: 97.5%;
      height: 80px;
      border: 0px;
      background: #fff;
      resize: none;
      padding: 10px;
      outline: none;
      margin-bottom: 5px;
      border-radius: 4px;
  }
  .content-submit {
      background: #005ddb;
      width: 70px;
      height: 30px;
      border: 0px;
      border-radius: 4px;
      color: #fff;
      outline: none;
      cursor: pointer;
      float: right;
  }
  </code></pre>
  
  <p>I hope someone cal help me fix this as soon as possible, thanks!</p>