Why does the dropdownlist show under the div

Tags: html,css,asp.net,drop-down-menu

Problem :

I have the following ASP.net code which is a popup window shown to the user:

<div id="popupContact">
    <a id="popupContactClose" title="Close Window">x</a>
    <h3>Add a New Message</h3>
    <div id="dvFirst" class="mainSecond">
        <div id="leftdiv3" class="leftdiv">Client: </div>
        <div id="rightdiv3" class="rightdiv" style="z-index: 100;"><asp:DropDownList ID="ddlCliNewMsg" AutoPostBack="false" ClientIDMode="Static" runat="server" CssClass="chosen-select" ></asp:DropDownList></div>
    </div>
    <div id="dvSecond" class="mainSecond">
        <div id="leftdiv4" class="leftdiv">Location: </div>
        <div id="rightdiv4" class="rightdiv" style="z-index: 100;"><asp:DropDownList ID="ddlSitNewMsg" AutoPostBack="false" ClientIDMode="Static" runat="server" CssClass="chosen-select"></asp:DropDownList></div>
    </div>
    <div id="dvSixth" class="mainSecond">
        <div id="leftdiv6" class="leftdiv">Specialty: </div>
        <div id="rightdiv6" class="rightdiv" style="z-index: 100;"><asp:DropDownList ID="ddlPraNewMsg" AutoPostBack="false" ClientIDMode="Static" runat="server" CssClass="chosen-select"></asp:DropDownList></div>
   </div>
   <div id="dvThird" class="mainSecond">
        <div id="leftdiv5" class="leftdiv">Provider: </div>
        <div id="rightdiv5" class="rightdiv" style="z-index: 100;"><asp:DropDownList ID="ddlProNewMsg" AutoPostBack="false" ClientIDMode="Static" runat="server" CssClass="chosen-select"></asp:DropDownList></div>
    </div>
    <div id="dvFourth" class="mainFirst">
        <div id="leftdiv1" class="leftdivspec"><sup style="color: #FF0000; font-weight: bold;">*</sup>Message: </div>
        <div id="rightdiv1" class="rightdivspec"><asp:TextBox ID="tbMessage" ClientIDMode="Static" runat="server" TextMode="MultiLine" Columns="30" Rows="5"></asp:TextBox></div>
    </div>
    <div id="dvFifth" class="mainSecond">
        <div id="leftdiv2" class="leftdiv">Active?</div>
        <div id="rightdiv2" class="rightdiv"><asp:CheckBox ID="cbIsActive" ClientIDMode="Static" runat="server" /></div>
    </div>
    <div style="width: 96%; text-align: right; padding: 2%;">
        <asp:UpdatePanel runat="server" ID="upSubmit" ClientIDMode="Static" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="btnSubmit" ClientIDMode="Static" UseSubmitBehavior="false" OnClick="SubmitAdminMessage" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</div>

The CSS:

.mainFirst
{
    width: 95%;
    margin: auto;
    padding: 1%;
    height: 90px;
    border-bottom: 1px dotted #808080;
}
.mainSecond
{
    width: 95%;
    margin: auto;
    padding: 1%;
    height: 30px;
    border-bottom: 1px dotted #808080;
    overflow: hidden;
}
.leftdiv
{
    width: 35%;
    height: 30px;
    float: left;
    font-weight: bold;
}
.rightdiv
{
    width: 65%;
    height: 30px;
    float: left;
}

Originally when the popup window loads, it is displayed like this:

Whenever I select something from the dropdownlist, it goes under the DIV below it:

How can I modify the CSS so that each DropDownList will appear outside of the container so it will display the options?

---

Solution :

you can try to add " overflow: visible " to the container class