<div> не толкает другого <div>

Вот мой код, чтобы попробовать: http://www.codepen.io/anon/pen/DCylg

У меня есть два чата. Верхняя часть должна подтолкнуть к нижней части вниз, если появится больше пузырьков в чате, я попытался добавить обертку с подкладкой для нажатия на div, но ничего не делает.

.bubble2{
 float:left 

}
.clearfix{display:block; clear:both;}

.bubblewrap {padding-bottom:15%;position:relative;}

.bubble
{
text-align:left;
color:black;
float:left;
position: absolute;
background: gray;   
border-left: 2px solid #e67e22;
margin-left:51px;
padding:5px;
width:500px;
}

.bubble h4 {text-align:left;font-size:14px;font-weight:bold;font-variant:small-caps;clear:both;margin-bottom:3px;padding:0;margin-top:-5px;color:#2ecc71;}
.bubble span {font:17px/1px "Times New Roman", Times, serif;}

.bubble-img-holder{float:left;}
.bubble-img-holder h4{display:block; float:none; font:12px/12px "Times New Roman", Times, serif;}
.bubble-img-holder h4 {width:50px;overflow-x:auto}

Тогда мой Html:

<div class="bubblewrap">
<div class="holder clearfix"> 
<div class="bubble-img-holder"><img src="http://www.placehold.it/51x50" class="bubble2">
<h4 id=" username2" class="chat-listitem-username" data-bind="text: username">USERddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</h4>
  </div>

<div id="userName" class="bubble" style="display:block; float left;" >
<span class="chat-list item-message" data-bind="html: content">SPAM SPAM SPAM SPAM SPAM SPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAM PAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPA<br><br><Br><br><br></span>
</div>
</div>
</div>

<div class="bubblewrap">
<div class="holder clearfix"> 
<div class="bubble-img-holder"><img src="http://www.placehold.it/51x50" class="bubble2">
<h4 id="username2" class="chat-listitem-username" data-bind="text: username">USERddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</h4>
  </div>

<div id="userName" class="bubble" style="display:block; float left;" >
<span class="chat-list item-message" data-bind="html: content">SPAM SPAM SPAM SPAM SPAM SPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAM <br><br><Br><br><br></span>
</div>
</div>
</div>