DIV expanding over the DIV below - html

Question

I just hit sth that appears to be a bug or at least a really weird feature of CSS/HTML.
Now, the problem is that i got three divs in a row, all inside a parent div.
The first and the second one are supposed to be text containers in a chat-like matter. The last one is supposed to be excluded and be a paging navigation.
On the very first page, that works fine. On every other page, the last text container div expands over the navigation. When using the Chrome developer tools, it shows me that the second div is only having its real size, while the background still expands over the navigation. But if i delete the navigation, the second text container resizes to its real size.
Also, when using
position:absolute;
it doesn't expand. Setting the position to relative explicitly didn't fix the problem and setting the background-color to sth else didn't change the white background.
I made you a quick demonstration under jsfiddle.net.
So the final question is: Why does the second text div expand? Or doesn't it but it looks like it does?
//edit: As suggested in the comments, here is the raw CSS/HTML outside jsfiddle. I still don't think that's a good idea, but if you say so..
<div class="decoded_chat" pagenr="1" style="display: block;">
<div class="decoded_user decoded_user_first" isme="0">
<a href="https://www.facebook.com/4" target="_new" title="Profil aufrufen">
<img class="decoded_user_avatar" src="http://graph.facebook.com/4/picture?type=square">
<div class="decoded_user_name">
Zuckerberg
</div>
</a>
<div class="decoded_msg_date">
02.02.2014, 01:36 Uhr
</div>
<div class="decoded_msg">
I will listen to the songs when I'm not so tired
</div>
<div class="decoded_msg">
I don't know.. Possibly
</div>
<div class="decoded_user decoded_user_last" isme="0">
<a href="https://www.facebook.com/4" target="_new" title="Profil aufrufen">
<img class="decoded_user_avatar" src="http://graph.facebook.com/4/picture?type=square">
<div class="decoded_user_name">
Zuckerberg
</div>
</a>
<div class="decoded_msg_date">
02.02.2014, 01:33 Uhr
</div>
<div class="decoded_msg">
I've been ill all week.. Just haven't had time for much
</div>
<div class="decoded_chat_pager">
<a href="javascript:void(0);" pagenr="0" class="cloudview_msg_prev">
« Vorherige Seite
</a>
<a href="javascript:void(0);" pagenr="2" class="cloudview_msg_next">
Nächste Seite »
</a>
</div>
</div>
a {
text-decoration: none;
color: white;
}
.chat_list {
width:100%;
}
.decoded_chat {
text-align:left;
width:100%;
margin:auto;
background-color:white;
color:black;
border-radius:10px;
}
.cloudview_msg_next {
float:right;
}
.decoded_chat_pager {
margin:auto;
margin-top:5px;
text-align:left;
width:95%;
}
.decoded_msg {
margin-bottom:3px;
}
.decoded_user {
padding:15px 10px;
min-height:50px;
}
.decoded_user_last {
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
.decoded_user_first {
border-top-left-radius:10px;
border-top-right-radius:10px;
}
.decoded_user_name {
color:black;
margin-bottom:5px;
}
.mychatmessage {
background-color:#BFF2BF;
}
.decoded_msg_date {
float:right;
color:grey;
margin-top:-30px;
}
.decoded_user_avatar {
position:absolute;
}
.decoded_user_name {
font-weight:bold;
}
.decoded_user_name, .decoded_msg {
margin-left:64px;
}
table {
text-align:center;
}
.flipped-180 {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter:"FlipH";
}
#detailopener, #return_to_msg, #return_to_cloud, #cloudview_delete {
display:none;
}
.chat_list_names {
color:grey;
}
.invi {
position:fixed;
width:1px;
height:1px;
top:-2000px;
left:-2000px;
}
.next_page_chat_list {
text-align:right;
padding-right:5px;
}
.last_page_chat_list {
padding-left:5px;
text-align:left;
}
.loadingtext {
margin-top:7px;
}
#opener {
position:fixed;
left:25px;
bottom:25px;
cursor:pointer;
display:none;
}
.dontdroponme {
opacity:0.3;
}
#dropper {
position:fixed;
right:25px;
bottom:25px;
cursor:pointer;
display:none;
}
.dropinfo {
border-radius:7px;
color:white;
padding:5px 25px;
}
.dorpinfo img {
width:48px;
}
.chatlist_button img, .decoded_user_avatar {
box-shadow:0 0 5px #888;
border-radius:5px;
}
.chatlist_button {
background-color:white;
border-radius:5px;
box-shadow:0 0 5px #888;
padding:5px;
cursor:move;
max-width:200px;
margin:auto;
}
.ui-draggable-dragging {
position:absolute;
z-index:5;
}
body {
height:100%;
margin:0;
background-color:#3B5998;
color:white;
font-size:12px;
font-family:Calibri;
}
#innerbody {
margin:auto;
width:55%;
text-align:center;
}
#innerbody_floater {
height:50%;
width:100%;
margin:0;
}

Answer 1

Copy from http://www.w3schools.com/css/css_positioning.asp
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is html: