jQuery यूआई टैब: फ़्लोट के साथ div कैसे रखें: बाएं संपत्ति को टैब में?

मैं टैब के लिए jQuery UI 1.8.16 का उपयोग करता हूं। मैं पहले टैब में कुछ divs कॉलम के रूप में रखना चाहता हूं (float:left संपत्ति के साथ)।jQuery यूआई टैब: फ़्लोट के साथ div कैसे रखें: बाएं संपत्ति को टैब में?

लेकिन मैं इसे सही तरीके से नहीं कर सकता: ऐसा लगता है कि टैब फ़्लोट संपत्ति के साथ उचित तरीके से काम नहीं करना चाहते हैं (टेक्स्ट के नीचे छवि देखें)।

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">First</a></li> 
     <li><a href="#tabs-2">Second</a></li> 
     <li><a href="#tabs-3">Third</a></li> 
    </ul> 
     <div id="tabs-1"> 
       <div style="border:1px solid red;float:left;"> 
        some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br> 
       </div> 
     </div> 
     <div id="tabs-2"></div> 
     <div id="tabs-3"></div> 

</div>

कैसे ठीक करने के लिए:

कोड नहीं है?

धन्यवाद!

<div id="tabs-1"> 
    <div style="border: 1px solid red; float: left;"> 
     some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br> 
    </div> 
    <div style="clear: both;"></div> 
</div>

आप this fiddle में परिणाम देख सकते हैं:

enter image description here