Simplified Layout Problem!
Hi Peeps,
I put a post on earlier regarding problems I was having with layouts. I decided to create a new simple project to help explain my problem. Here is the CSS:-
Code:
html, body
{
background-color: Gray;
height: 100%;
margin: 0;
padding: 0;
}
#ct100_Container
{
}
#ctl00_Header1
{
height: 108px;
background-color: Aqua;
}
#ctl00_LeftMenu
{
width: 140px;
height: 100%;
background-color:Fuchsia;
}
Here is my ASP.Net Code:-
Code:
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<link href="MasterPage.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="Container" runat="server">
<div id="Header1" runat="server"></div>
<div id="LeftMenu" runat="server"></div>
<div>
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</div>
</div>
</form>
</body>
</html>
Basically what is happening is the left menu is not taking into account the height of the header1 div. How do I get my menu div to expand to the maximum height. The reason being is because later on the content in the middle with by dynamic and will grow so I want the menu div to grow with it.
I hope this is a more simplified example of my problem, thank you all very much for any help.
I am a novice at ASP.NET so any help would be much appreciated.
Jiggy!
Re: Simplified Layout Problem!
Right now, the menu div is not aware of the header div. If you want them to be aware of each other, you need to wrap them in a container div. Have a read here.
http://www.ejeliot.com/blog/61
