jQuery Autoheight plugin for div tags: PROBLEM!

[3happypenguins]

I am using iframe for my menus (I don't want to hear your lecturing about iframes), and I previously just used my css file to set the px on my iframe heights, but I've been having cross-browser issues with that. For some people, the menus are cut off, or appear to be "floating." I decided to implement a jquery script and an auto height plugin in javascript. It "worked" (kind of), except that the part of the menu that is in a div tag completely disappears. It's like the plugin (or something) doesn't recognize it.

When I remove the div tag (plain text), or when I use my <div id="text"> attribute (I have #text in my css file), it works just fine. I don't understand why!!! The css that I want to use for the menu is what makes it horizontal. Could that be the culprit?

Here is my CSS for the menu (not my main CSS file):

body 
{
    background: #eeeff4;
    margin: 15px;
}

#text 
{
    font-family: Arial, Georgia, Helvetica, sans-serif;
    font-size: 10pt;
    text-align: justify;
    color: #26393D;
    cursor: default;
}

h1,h2,h3,h4 {
	margin: 0 auto;
	text-align: center;
}

h1 {
	font-size: 36px;
}

h2 {
	font-size: 28px;
}

h4 {
	font-size: 18px;
	text-transform: capitalize;
}

.frontpage {
	text-align:center;
}

a {
	color: #638489;
	text-decoration: none;
}

a:hover {
	color: #b22d29;
	text-decoration: none;
}

#tabs {
    float: left;
    font-family: Arial, Georgia, Helvetica, sans-serif;
    font-weight: bold;
    font-variant: small-caps;
    font-size: 11pt;
    background: #eeeff4;
    z-index: 1000;
    position: relative;
}

#tabs * {
    margin: 0px;
    padding: 0px;
}

#tabs ul {
    clear: left;
    float: left;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

#tabs ul li {
   background: url(images/tableft.png) top left no-repeat;
   background-color: #FFFFFF;
   display: block;
   float: left;
   list-style: none;
   margin: 15px 5px 0px 5px;
   padding: 0px;
   position: relative;
}

#tabs ul li a {
    background: url(images/tabright.png) top right no-repeat;
    display: block;
    margin: 0px 0px 0px 0px;
    padding: 3px 20px 0px;
    font-weight: bold;
    color: #27393d;
    text-decoration: none;
    line-height: 1.3em;
}

#tabs ul li:hover	{
    background: url(images/tableft.png) top left no-repeat;
	background-color: #27393d;
}

#tabs ul li a:hover	{
    background: url(images/tabright.png) top right no-repeat;
    color: #FFFFFF;
}

#tabs ul li:hover a 
{
   background: url(images/tableft.png) top left no-repeat;
   background-color: #27393d;
   color: #FFFFFF;
}

#tabs ul li:hover a 
{
   background-color: #27393d;
   background: url(images/tabright.png) top right no-repeat;
   color: #FFFFFF;
}