php - How to make my chat div's appear below each other -

i making small chat , having issues making div's appear below each other. have:

$i = 0; while($i < 5) { echo "<div class='mychatholders'>";  echo "<div class='pro_pic'>";   //my image  echo "</div>"; echo "<div class='chatinfo'>"; //my information echo "</div>"; echo "</div>"; echo "<br />";  $i++; } 

my css:

div.mychatholders { left: 5px; color: black; width: 290px; height: 100px; border-radius: 10px; } div.pro_pic { left: 5px; width: 30px; height: 30px; border: solid black 1px;  } div.chatinfo { color: black; font-size: 14px; left: 40px; width: 245px; } 

please note (while function) simulate information drawn dbase.

now issues div's in 1 position. them fall below each other. not understand why happening. can me code , explain why?

i have looked @ solution not working me check here

add position:relative; divs.

working fiddle based on code: http://jsfiddle.net/mmgyu/1/

note: borders in fiddle demonstration purposes.

div.mychatholders {     position: relative;     left: 5px;     color: black;     width: 290px;     height: 100px;     border-radius: 10px; } div.pro_pic {     position:relative;     left: 5px;     width: 30px;     height: 30px; } div.chatinfo {     position:relative;     color: black;     font-size: 14px;     left: 40px;     width: 245px; }