Question

I’m sure this will be ridiculously simple, but whatever… I’m trying to display a text area with a button to its right, similar to how StackOverflow displays a comment field with button when one clicks the ‘Add Comment’ link…the problem I’m experiencing is with the button alignment; it appears to align at the top right of its div (see image), I want to align it at the bottom left. I’ve tried using text-align, align, nothing works to move that pesky button, I used padding-top to move the button down, but padding-right appears to have no effect, but there’s got to be a better way than padding. I need it to be cross-browser compatible as well.

Here is the html/css I’m using…

.newComment {
  position: relative;
  width:475px; 
  background-color:WHITE;
}


 <div class='newComment'>
   <div style='float:left;width:375px;'>
     <textarea style='border:1px solid #888;overflow:auto' rows='3' cols='40'>comments </textarea>
   </div> 
   <div style='float:left;width:75px;'> 
     <input type='submit' value='Add Comment'/> 
   </div>
 </div>

Answer 1

The reason why it is not adjacent to the textarea is because the div encompassing the text area is too large. If you inspect element on Chrome, you will notice where all the elements are.

I’d suggest you do not put them in separate divs if you want them stuck together.

<style>
    .newComment {
        position: relative;
        width: 475px; 
        background-color: white;
    }
</style>

 <div class='newComment'>
     <textarea style='border:1px solid #888; overflow:auto' rows='3' cols='40'>comments</textarea>
     <input type='submit' value='Add Comment' /> 
 </div>