I'm having trouble with a simple situation dealing with runat server

Question

User1773436720 posted

Hi,

Please forgive me if this is an obvious mistake, but I know I have done this before, it just is giving me grief now. I appreciate your help!

I'm wanting to show/hide three divs. The problem is, when I add runat="server" to the div the id section in the css file stops working, but the class area keeps working. Why? It should be simple to do, have I just forgotten something? Here is my code:

<-----.aspx>

    /*Three server control buttons*/
    <div id="adminmenubar" class="horzmenubar">
        <asp:Button ID="btn_admin_utls" runat="server" CssClass="btn btn-default horzmenubtnctr" OnClick="btn_admin_utls_click" Text="Utils" />
        <asp:Button ID="btn_admin_usrs" runat="server" CssClass="btn btn-default horzmenubtnctr" OnClick="btn_admin_usrs_click" Text="Users" />
        <asp:Button ID="btn_admin_orgs" runat="server" CssClass="btn btn-default horzmenubtnctr" OnClick="btn_admin_orgs_click" Text="Organizations" />
    </div>
    /*Three divs ran at server*/
    <div id="admin_utls_area" class="admincontentarea" runat="server"></div>
    <div id="admin_usrs_area" class="admincontentarea" runat="server"></div>
    <div id="admin_orgs_area" class="admincontentarea" runat="server"></div>

<-----.aspx.cs>

        protected void btn_admin_utls_click(object sender, EventArgs e)
        {
            DisplayArea("utils");
        }

        protected void btn_admin_usrs_click(object sender, EventArgs e)
        {
            DisplayArea("users");
        }

        protected void btn_admin_orgs_click(object sender, EventArgs e)
        {
            DisplayArea("orgs");
        }

        //simple Toggle of div visibility based on button clicked
        protected void DisplayArea(string area)
        {
            try
            {
                admin_utls_area.Visible = false;
                admin_usrs_area.Visible = false;
                admin_orgs_area.Visible = false;

                switch(area)
                {
                    case "utils":
                        admin_utls_area.Visible = true;
                        break;
                    case "users":
                        admin_usrs_area.Visible = true;
                        break;
                    case "orgs":
                        admin_orgs_area.Visible = true;
                        break;
                }
            }
            catch (Exception)
            {

                throw;
            }
        }

<-----.css>

#admin_utls_area{
    border-color: red;
}
#admin_usrs_area {
    border-color: green;
}
#admin_orgs_area {
    border-color: blue;
}
.admincontentarea {
    height:200px;
    width:100%;
    border:solid thin;
    border-radius: 6px;
}

Thanks