Hello,

I am not sure if this is a css bug or jquery tab bug. But I'm going nuts trying to figure it out.

The page is a striped down test page that contains a simple two column css div layout.

Here is the page code:

1. 
   <div id="wrapper">
       <div id="rightside">           
           <br /><br /><br /><br /><br /><br /><br /><br /><br />rightside<br /><br /><br /><br /><br /><br /><br /><br /><br />
       </div>
       <div id="leftside">
       
           <div id="tabs2">
               <ul>
                   <li><a href="#fragment-1"><span>One</span></a></li>
                   <li><a href="#fragment-2"><span>Two</span></a></li>
                   <li><a href="#fragment-3"><span>Three</span></a></li>
               </ul>
               <div id="fragment-1">
                   <p>First tab is active by default:</p>
                   <pre><code>$('#example').tabs();</code></pre>
               </div>
               <div id="fragment-2">
                   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
               </div>
               <div id="fragment-3">
                   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
               </div>
           </div>
       </div>
   </div>
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

Here is the css:

1. 
   body {
       width:992px;
       margin:0 auto;
       margin-top:0px;
   }  
   
   #rightside {
       width:321px;
       background-color:#ffffff;
       float:right;
       border-left-width: 1px;
       border-left-style: solid;
       border-left-color: #666;
   }
   
   #leftside {
       width:665px;    
       background-color:#333333;
   }
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

Here is a picture of the output:


Oh, and the jquery code :

js files, ui.tabs.js and ui.core.js

I've tried with 1.3.2 and 1.4

1. $(function() {
       $("#tabs2").tabs();
   });
   
   

As seen in the picture the problem is that if there is any content in the right floating column it stretches the tabs in the first column.

Any ideas as to why or how to fix it?