How do I get 'footer' content on a master page to push down when main content requires it?

Question

Been a while since I've dealt with ASP.NET and this is the first time I've had to deal with master pages. Been following tutorials everything is fine except a problem I'm having with the footer.

The master page has divs for topContent, mainContent and footerContent. In mainContent I have a ContentPlaceHolder.

The default content page (just getting some proof-of-concept going here) has a few labels and text boxes in it with one multi-line text box in the Content area. "Content1" properly links back to ContentPlaceHolder1 back on the master page.

When I run the site, the content appears but the footer section isn't "pushed down" by the now-filled ContentPlaceHolder - it almost acts like a background image.

What attribute am I missing here? I tried using CSS to force the footerContent to the bottom, but that just put the fotter content at the bottom of the browser and when I expanded the multi-line text box to greater than the browser's window height, the same thing happened (content overlaying the footer)

I know this has to be something simple that I'm missing.

The basics of the master page are as follows:

 <div id="mainContent">
     <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
     </asp:ContentPlaceHolder>
 </div>

 <div id="footerContent">
     <br/><br/>
     <center style="font-size: small; font-style: italic; font-family: Arial">
         <a target="_new" href="/Disclaimer.html">Security and Privacy Notice</a><br/>
         ...
     </center>
 </div>

Help!

EDIT: Turns out that VS2005 was putting "position: absolute" tags on all the components (labels and text boxes) that I put on the content.aspx page. Going into the asp tags and changing them to "position: relative" did the trick.

Answer 1

This doesn't sound like a master page issue, this sounds like an HTML/CSS layouting issue. What you haven't stated is whether your DIVs are absolutely positioned or whether they occur within page flow.

Normally, assuming you're NOT positioning those DIVs absolutely, the header DIV will be statically sized, the footer will be statically sized, but the content DIV should be allowed to stretch vertically to fit the content. This in turn pushes your footer DIV below the last line of content, which is what you want. But in order for that to happen, we usually omit "position: absolute;" from the footer DIV. It needs to flow.

Your question is basically asking, "I have 3 DIVs, one on top of the other. They're not pushing each other downward appropriately."

The answer is almost always a rogue "position: absolute;" tag, a margin issue, or maybe you're using a "page container DIV" that's not set appropriately to expand as its interior DIVs expand.

Answer 2

This is more an HTML + CSS issue and not an asp.net masterpage issue.
Here is how I would Change the Code to:

    <div id="mainContent"style="position:relative;">
       <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
       </asp:ContentPlaceHolder>
   </div>
<br style="clear:both;" />
 <div id="footerContent" style="position:relative;">
     <br/><br/>
     <center style="font-size: small; font-style: italic; font-family: Arial">
         <a target="_new" href="/Disclaimer.html">Security and Privacy Notice</a><br/>
         ...
     </center>
 </div>

Answer 3

A clearing div between maincontent and footercontent will help, but other things to watch out for, especially in sucky browsers like IE6 that don't clear or float well, are height and overflow. You're probably not, but if you're hiding overflow and setting a height, that truncates any content that flows past the height. Something to check.

Often, setting float: left; on all your main div elements will help in conjunction with the clearing div.

Also, "putting the footer content at the bottom" implies that it is absolutely positioned, as the other responders have pointed out. As long as footercontent follows the clearing div, it should set up at the bottom of your content, and not at the bottom of the page.

I notice you're using a center tag, as well. That, and div align=center, aren't standard anymore, and could be messing with you as well. Use margin: 0px auto; and text-align: center; instead.

I recommend you do three things in general:

• pull up your app in at least three browsers, at least one of which should be Firefox with Firebug installed. When you launch the app, paste the URL from your default browser into the others you're using. Identify where you're having the problem.
• read up at positioniseverything.net to see if any of the problems listed there resemble yours. The Bergevins do great work, and will set you straight. Especially if IE6/7 is a problem.
• make a clear class with clear:both and height: 0 that you can reuse. If you have to tweak it, it's easier than touching each of the inline styles.

Good luck. By any chance, can you edit your question so that we can see the styles, too?