html - make class start on bottom of div problems -

trying make span start @ bottom of div found answer here. not working way want it, don't want them layer each other.

https://jsfiddle.net/j96s0pn6/

#wrap {        height: 200px;     position: relative; }  .msg {    bottom: 0;   position: absolute; }         <div id="thewwrap">             <div id="wrap">                 <span class="msg"><b>nickname: </b>text</span><br>                 <span class="msg"><b>nickname: </b>text</span><br>              </div>             <form id="theinput">                 <input size="35" id="message">                 <input type="submit">             </form>         </div> 

you can rearrange html #wrap, wraps around form well. give #thewwrap relative position, , second wrap absolute position instead of individual classes: js fiddle

html

<div id="thewwrap">     <div id="wrap"> <span class="msg"><b>nickname: </b>text</span>          <br> <span class="msg"><b>nickname: </b>text</span>          <br>         <form id="theinput">             <input size="35" id="message">             <input type="submit">         </form>     </div> </div> 

css

#thewwrap {     height: 200px;     position: relative; } #wrap {     bottom: 0;     position: absolute; } 

explanation:

absolute takes position related direct - non-static parent. therefore, if 2 siblings have absolute positioning, , same position (top, left, bottom, right) assigned, land in same area.

source:

css position property