javascript - JQuery mobile listview items go outside boundary? -

i'm building webpage using jquery mobile interface. come across problem: listview ul not follow style set on projectlisting id, goes out of boundary.

the script @ end of page extending content div full screen.

this html code

<div class="content" data-role="content">     <div id="projectlisting">         <div data-role="header" data-theme="e">             <h5>project list</h5>         </div>         <div id="wrapper_projectlist">             <ul id="projectlist" data-role="listview" data-filter="true" data-split-theme="c">                 <li>                     <a href="#" data-value="1" data-name="name" class="project-action">project 1</a>                     <a href="#" data-value="1" data-name="name" class="project-action"></a>                 </li>             </ul>                    </div>     </div>      <div id="projectperson">     </div>      <div id="personlisting_assign">     </div> </div> <script type="text/javascript">     var selectedprojectid = number.nan;     var selectedpersonid = number.nan;      function setdimensionsforprojectperson() {         var h = $(window).height() - $(".mainheader").outerheight() - $(".mainfooter").outerheight();         $(".content").css("height", h);     }      $(document).ready(function() {         setdimensionsforprojectperson();         $(window).resize(setdimensionsforprojectperson);         window.onorientationchange = setdimensionsforprojectperson;     });  </script> 

this css code:

#projectlisting, #projectperson, #personlisting_assign {     outline: 1px solid grey;     float: left;     height: 100%;     width: 33%; }  /* used project list displayed, under #projectlisting div */ #wrapper_projectlist {     position: relative;     width: 100%;     z-index: 1; } 

could please explain why list break boundary , tell me how fix problem. in advance.