JQuery controlling a DIV but not its children

This is my layout:

     <div id="outerwrap">
          <div id="innerwrap">      
             <div id="centerc">...</div>          

             <div id="rightc" style="font-weight:bold">
          </div>
          <div style="background-color:White;height:10px;top:284px;left:0px"></div>

          <div id="leftc">..</div>
        </div>
       <div id="footer"">...</div>

    #outerwrap
    {
       background-color: #EE44E7;
    }

    #innerwrap
    {
       background-color: #EE44E7;
       margin-right: 200px;
       top:0px;
       height:100%;
    }


    #leftc
    {
       position: absolute;
       top: 111px;
       left: 0px;
       width: 197px;
       background-color: #EE44E7;
       font-size: 10px;
    }

    #centerc
    {
       position: relative;
       margin-left: 199px;
       padding: 0px;
       background-color: white;
    }

    #rightc
    {
       position: absolute;
       top:111px;
       right: 0px;         
       width: 199px;
       color: blue;
       background-color: #EE44E7;
       font-size: 10px;
    }


#footer
    {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 62px;
visibility: hidden;
    }

      

        
        
        
      

    

This is the request I wrote:

<script type="text/javascript">
    $(document).ready(function() {

        $("#leftc").hover(
            function mouseover() {
                $(this).css({ width: "190px" });
                $("#centerc").css({ "margin-left": "195px" });
            },
            function mouseout() {
                $(this).css({ width: "25px" });
                $("#centerc").css({ "margin-left": "29px" });
            }
            );
    });
</script>

      

        
        
        
      

    

I want the left div to be only partially visible on page load. Now, when the user hovers over the mouse, the left div (left) should expand to 190px. On Hover out, it should return to a partially visible state.

The problem is that the left div also has some images and text boxes inside it that are not affected by the code shown above. Do they stay the same width?

The controls inside the div (left) look something like this:

<div id="leftc">
       <!-- Google Search Box Start -->
         <div id="searchBox">
         <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr><td> <input name="ctl00$q" type="text" value="Google Custom Search" maxlength="100" id="ctl00_q" onclick="ctl00$q.value=''" onfocus="this.className = 'highlight';" onblur="this.className = '';" style="border-color:#94C7EF;border-width:1px;border-style:solid;" /></td>
                           <td align="right">
                              <input type="image" name="ctl00$_btnSearch" id="ctl00__btnSearch" src="images/search.gif" alt="Search" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$_btnSearch&quot;, &quot;&quot;, true, &quot;SearchGroup&quot;, &quot;&quot;, false, false))" style="border-width:0px;" />
                           </td>
                           <td width="5px" align="right">
                           <span id="ctl00__rfvQ" style="color:Red;visibility:hidden;"></span>
<input type="hidden" name="ctl00$cx" id="ctl00_cx" value="004354355454353138:kmy_68iupnm" />
<input type="hidden" name="ctl00$cof" id="ctl00_cof" value="FORID:11" /></td>
                        </tr>
                     </table>      
         </div>  
         <!-- Google Search Box End -->


         <br /><br />

         <div id="monthlabel">All this Month</div> 
         <div id="monthall">  
         <img id="ctl00_imgAuth" src="images/all/Jacor.jpg" style="border-width:0px;" /><br />
         <div style="margin-top:2px;"><a href="http://www.xyz.com/AllMonth.aspx">Jacor Jul</a></div>
         </div>
</div>