css - text displayed outside of <div> when parent position is relative -

i have title bar <div> contains text. position of <div> working fine but weird reason text inside outside <div> follows in jsfiddle code.

have tried can't find out why text there. may have floating <div>'s above or parent element (the <div>) being set to:

div#user_topics_box {     position: relative;     top: 134px;     left: 0px; } 

still don't understand how affecting inner text. appreciated!

edit: text supposed inside first black bar div above it.

http://jsfiddle.net/ka6f5/1/show/
http://www.quirksmode.org/css/clearing.html

you need clear floated containers preceding.

#user_topics_box {   clear: both;   left: 0;   position: relative;   top: 134px; } 

and make floated containers contained in parent container

#profile_area {   overflow: hidden; }