CODEWITHSUNDEEP
csshtml
raffian
raffian

Reputation: 32056

How to align a button inside a DIV

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>

Upvotes: 0

Views: 16268

Answers (3)

caleb
caleb

Reputation: 1637

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>

Upvotes: 1

Alex
Alex

Reputation: 35399

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/

Upvotes: 1

mildog8
mildog8

Reputation: 2154

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>

Upvotes: 0

Related Questions