asp.net webforms nested master pages and css

Question

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

How do your submasterpage look and also a example page would be good. — NiKiZe
– NiKiZe, Commented Aug 28, 2013 at 23:52
Your exmple code is not using root releative paths, if they were they would start with /. — Jon P
– Jon P, Commented Aug 29, 2013 at 5:45
See if you can isolate the probelem. Have you tried using just the base (outer) master page with your child page? If this works then there is some markup on the inner page that is causing the problem. I had seomething like this once where the nested master page had a rogue closing div tag. Also use firebug or similar to further insepct your elements and styles applied to them. — Jon P
– Jon P, Commented Aug 29, 2013 at 23:32

Jon P · Accepted Answer · 2013-08-29 01:15:34Z

1

Use Root relative paths for you CSS links. If your child pages are in a diferent directory to the masterpage the links to your css files will break. Use the following instead:

<link href="/css/bootstrap.min.css" rel="stylesheet" />
<link href="/css/custom.css" rel="stylesheet" />

answered Aug 29, 2013 at 1:15

Jon P

19.9k8 gold badges52 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lance Collins Over a year ago

This example code was just a simple mock up I threw together to try and explain what I was doing. In the full version the masters and child pages are all in the same folder and I am using root relative paths.

Collectives™ on Stack Overflow

asp.net webforms nested master pages and css

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related