1

I want to put a textarea in the bottom of a div (and fixed there):

<div id=msg>

 <div id=content>
     aaaaaaaannnnnnnnnn<br>
     aaaaaaaannnnnnnnnn<br>
     aaaaaaaannnnnnnnnn<br>
 </div>

 <div id=text>
  <textarea></textarea>
 </div>

</div>

css

#msg{
 width:60%;
 height:500px;
 float:left;
 background-color:#fff;
 border:1px solid #000;
}
#content{
overflow-y: auto;
}
#text{
 bottom:0;
position:fixed;
}

why bottom:0 not working? http://jsfiddle.net/mu1tynax/

RGS
  • 4,062
  • 4
  • 31
  • 67
  • Possible duplicate of [How to align content of a div to the bottom with css?](http://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom-with-css) – JJJ Oct 06 '15 at 16:43

3 Answers3

1

In your fiddle, you missed the position: fixed. However, note that fixed positioning is relative to the body, not to the relative parent div.

Insert the position in your fiddle and it works.

Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
1

Add

position:relative;

to #msg

and 

position:absolute;

to #text

I've updated the JSFiddle for you: https://jsfiddle.net/mu1tynax/5/

credits to: Align Div at bottom on main Div

Community
  • 1
  • 1
Swag
  • 2,090
  • 9
  • 33
  • 63
-1

You need to set position to absolute in your "text" div, but also set the position to relative in the parent div. Fiddle

#msg{
 width:60%;
 height:500px;
 float:left;
 background-color:#fff;
 border:1px solid #000;
 overflow-y: auto;
    position: relative;
}
#text{
    position: absolute;
 bottom:0;
}

More info on positioning elements (absolute) here: https://css-tricks.com/absolute-positioning-inside-relative-positioning/

deebs
  • 1,390
  • 10
  • 23
  • @TheOddGuy if I needed to copy and paste your answer, then I should be fired from my job. This is a very simple solution. – deebs Oct 06 '15 at 16:48