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:
<form id='form1' runat='server'> <div id='topContent'> <table style='width: 832px'> </table> </div> <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> </form> 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.
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.