0

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.

enter image description here

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>
raffian
  • 31,267
  • 26
  • 103
  • 174

3 Answers3

1

You've set the widths of the container divs but you haven't specified the height, so your padding is not taking. I've provided a sample below so you can visually see what is happening...

http://jsfiddle.net/g6JSU/

Below is a possible solution with the button aligned to the vertical center:

http://jsfiddle.net/g6JSU/1/

Alex
  • 34,899
  • 5
  • 77
  • 90
  • jsfiddle doesn't always work when it comes to pixelation of width. For example, I have got [this](http://jsfiddle.net/rkudt6tc/) working on my browswer with perfect spacing whereas jsfiddle doesn't show me this thing properly. – ha9u63a7 Oct 31 '14 at 12:01
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>
caleb
  • 1,579
  • 12
  • 12
  • Actually, I need some minor padding between the right side of the textarea and the button, I should have mentioned that earlier – raffian Feb 11 '12 at 23:38
  • You're right, the textarea div was too large, thanks for pointing that out, that was the problem. – raffian Feb 11 '12 at 23:41
0

try this

.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 style="float: left; margin-top: 20px;" type='submit' value='Add Comment'/> 
   </div>
 </div>
mildog8
  • 2,030
  • 2
  • 22
  • 36
  • Thanks, that's a similar effect to `padding-top` in the div containing the button, but I still need to move the button to the left; `margin-right` does not do anything, – raffian Feb 11 '12 at 23:37