jQuery Forum

I have a page with a main div  (which contains several 'tab' divs (#tabs-1, etc.).  Each tab div contains a php include file which links to a php or html file.  The include files contain several divs (#leftcontent, #rightcontent, etc.) which contain iframes holding external web content.

The tab structure works fine if the width of the #maintab, #detailtab, etc. don't exceed 500px as defined in my style.css file.  But when I expand the width of these divs beyond 500px, the contents of the 500+px div now shows up in the far, left, bottom corner of each of the other tabs.

The behavior occurs if I include the iframe in the div as well as just include a single word of text in the same div so I don't think it's the external web content that's causing the problem. 

I've tried to adjust the width of the tab div in the jquery/css/smoothness/jquery-ui-1.8.14.custom.css file but I'm not familiar enough with these classes to really know how to adjust them properly.

I've posted the code below.  Please let me know if you've solved this issue or have any suggestions! 

Thanks!

Rick R.

=====

CODE:

<!--link to cascading style sheet-->
<link rel="stylesheet" type="text/css" href="css/style.css" />

<!--link to jqueryui 'smoothness' template-->
<link type="text/css" href="jqueryui/css/smoothness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />

<!--link to jqueryui library-->
<script type="text/javascript" src="jqueryui/js/jquery-ui-1.8.14.custom.min.js"></script>

<!--link to jquery library-->   
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>



<!--jqueryui tab javascript-->
<script type="text/javascript">
    $(function() {
        $( "#tabs" ).tabs();
    });
</script>

<!-- define list for inclusion in jqueryui tab structure -->
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Main</a></li>
        <li><a href="#tabs-2">Detail</a></li>
        <li><a href="#tabs-3">Photos</a></li>
        <li><a href="#tabs-4">Map/Directions</a></li>
        <li><a href="#tabs-5">Live Weather/Cams!</a></li>
        <li><a href="#tabs-6">Recreation</a></li>
        <li><a href="#tabs-7">Wildlife</a></li>
        <li><a href="#tabs-8">High Tech</a></li>   
        <li><a href="#tabs-9">Blog/Meetup</a></li>
        <li><a href="#tabs-10">RV Info</a></li>       
    </ul>
   
    <!-- php includes for each tab's contents -->
    <div id="tabs-1">
        <?php include 'maintab.php' ?>
    </div>
    <div id="tabs-2">
        <?php include 'detailtab.php' ?>
    </div>
    <div id="tabs-3">
        <?php include 'phototab.html' ?>
    </div>
    <div id="tabs-4">
        <?php include 'maptab.php' ?>
    </div>
    <div id="tabs-5">
        <?php include 'weathertab.html' ?>           
    </div>
    <div id="tabs-6">
        <?php include 'recreationtab.php' ?>
    </div>
    <div id="tabs-7">
        <?php include 'wildlifetab.php' ?>   
    </div>
    <div id="tabs-8">
        <?php include 'hightechtab.php' ?>   
    </div>   
    <div id="tabs-9">
        <?php include 'cgblogtab.php' ?>   
    </div>   
    <div id="tabs-10">
        <?php include 'rvtab.php' ?>   
    </div>   
</div> <!-- end div for defining list for jqueryui tab structure -->