如何设置样式的宽度以匹配外部DIV

Question

Using JQuery tabs, I have 2 tabs inside my div, Info & Images

Contents of <ul> contains the 2 tabs, ul is coloured blue. but the OnCLickk="ViewFeatureWorkflowImagePostBackBtn_Click" returns a table.

If the contents of the table is wider than the updatePanel width(300), the scroll bar appears and allows the user to view the rest of the table, adjusting the width of the update panel, thus not showing blue for the remainder of the ul.

So iv tried setting the width of the ul to 100% which I though would fill the outer div...didnt work..any ideas?

 <asp:UpdatePanel runat="server" ID="UpdatePanel8" UpdateMode="Conditional" ChildrenAsTriggers="true"
           Style="position: relative; overflow: hidden; background-color: White;               
          width: 300px; height: 300px; margin: 5px; text-align: center; outline-style: none; overflow-y: hidden; overflow-x:hidden;">
           <%--width: 500px; height: 450px; --%>

           <ContentTemplate>
                   <div id="DivHolding2Tabs" class="overflowcontent" style="border-color:Black;border-width:1px;border-style:solid;">

                       <ul id="tabList" style="width:inherit;">
                           <li><a href="#tabs-1">Info</a> </li>
                           <li><a href="#tabs-2" style="display:none;">Images</a> </li>

                       </ul>

                       <div id="tabs-1" class="WorkFlowLayout">
                               <b><font color="FF6600">Feature Properties </font></b>
                                <div id="divFeatureInfo" runat="server">
                                </div>
                       </div>

                       <div id="tabs-2" class="WorkFlowLayout">
                                <b><font color="FF6600">Images</font></b>
                                <div id="ImagesRelatingToFeatureDIV" runat="server">  
                               </div>
                       </div>
                   </div>
                   <br />
                   <br />
                   <div class="buttonwrap">
                       <span id="Span5" class="ActionBtns">
                           <asp:Button ID="ViewFeatureWorkflowImagePostBackBtn" runat="server" Style="display: none;
                               visibility: hidden;" OnClick="ViewFeatureWorkflowImagePostBackBtn_Click" />
                       </span>
                   </div>
           </ContentTemplate>
           <Triggers>
               <asp:AsyncPostBackTrigger ControlID="ViewFeatureWorkflowImagePostBackBtn" EventName="Click" />
           </Triggers>
       </asp:UpdatePanel>

Answer 1

Add an additional wrap div inside your .overflowcontent . Tab div and .overflowcontent should not be the same.

<div class="overflowcontent">
    <div id="DivHolding2Tabs">
        <!-- tabs -->
    </div>
</div>

Answer 2

It doesn't look like the ul is the only problem. Try this.

ul, .WorkFlowLayout, .overflowcontent {
   width: 100%!important;
}