如何使内容适合DIV - HTML / CSS

Question

假设我有以下html mark-up-

<ul class="datablock" id="Manufacturing_and_Qualification_Information" style="display: none;">    
 <div data-role="controlgroup" data-theme="d" class="ui-grid-m ui-corner-all ui-controlgroup ui-controlgroup-vertical">  
     <div data-theme="d" id="paramBlk" class="ui-block-m"><li>Blah Blah Blah Blah Blah</li></div> 
     <div data-theme="d" id="valueBlk" class="ui-block-n"><li>Blah</li></div>
</div>  
<div data-role="controlgroup" data-theme="d" class="ui-grid-m ui-corner-all ui-controlgroup ui-controlgroup-vertical">  
    <div class="ui-block-m" id="leftBtmRnd"><li>Blah Blah Blah Blah Blah</li></div> 
    <div class="ui-block-n" id="rightBtmRnd"><li>Blah</li></div>
</div>
</ul>

div中的内容仍然保留在div中当我在移动设备中以水平方式查看时，但当我在垂直视图中查看相同数据时，div的内容超出了它。我该如何解决这个问题呢 我正在使用jquery-mobile框架。

CSS-

border: 1px solid black;
color: black;
display: inline-block;
float: left;
height: 100%;
margin-bottom: -1000em;
min-height: 1px;
padding: 0 0 1000em;