I have an issue right now where I am using asp.net web forms to create a two column layout. I can create a 2-column layout with no problem in the master page with the code below.
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication5.Site1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="/css/bootstrap.min.css" rel="stylesheet" />
<link href="/css/custom.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<form id="form1" runat="server">
<div id="sidebar">
<asp:Menu ID="Menu1" runat="server">
<Items>
<asp:MenuItem Enabled="true" Text="Main Menu"></asp:MenuItem>
<asp:MenuItem Enabled="true" Text="Sub Page"></asp:MenuItem>
</Items>
</asp:Menu>
</div>
<div id="content">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</form>
</div>
</body>
However as soon as a add another master page that inherits this masterpage and then add a child page to the secondary master the body height of my css does not change based on the elements of the page. It stays with the same pixels as the child page that is wired up to the master above.
Here is the CSS I am using. The two columns extend to the bottom on the first page, but as soon as I go to another page where the elements inside the columns are bigger than the first the body stays at the same length
#sidebar, #content {
position: absolute;
top:0;
bottom:0;
}
#sidebar {
left: 0;
width: 15em;
background-color: bisque;
}
#content {
left: 18em;
right:0;
background-color:bisque;
}
This is a hard problem for me to describe, but any clues to at least get me pointed in the right direction would be very appreciated.
Thanks