There is a mystery that needs to be solved...
I have a basic layout for a webform - header, content, and footer. Inside the content div, I've placed a div intended to hold a flyout menu. However, the content div does not inherit the height of the menu's div as expected. Strangely, the menu div does correctly align with the borders of the content div. Upon inspecting the element, it appears that the height of the content div is 0.
Here is some code snippets:
<body>
<form id="formMaster" runat="server">
<div id="header">
bla bla
</div>
<div id="main">
<div>
<ucCatMenu:MenuControl ID="CatMenu" runat="server" />
</div>
</div>
<div id="footer">
bla bla
</div>
</form>
</body>
Additionally, here is the full code for the menu's web user control:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="wucCategoriesMenu.ascx.cs"
Inherits="Controls_wucCategoriesMenu" %>
<!-- CSS Code for flyout menu -->
<style type="text/css">
/* CSS styles go here */
</style>
<div>
<ul id="flyout">
<li><a class="fly" href="/globalop/pages/CatPage.aspx">category<b></b></a>
<ul>
<li><a href="#url">sub category</a></li>
<li><a href="#url">sub category</a></li>
...
</ul>
</li>
<li><a class="fly" href="/globalop/pages/CatPage.aspx">category<b></b></a>
<ul>
<li><a href="#url">sub category</a></li>
<li><a href="#url">sub category</a></li>
...
</ul>
</li>
</ul>
</div>
In conclusion, despite following examples and code closely, I'm still experiencing issues with the height of the "main" div not adjusting to fit the menu's div. Any insights or solutions would be greatly appreciated. Thank you in advance.