CSS. Placing footer at bottom of the webpage (not in the bottom of screen) in ASP Pages

Question

I have read a lot of approaches regarding placement of the footer in a webpage with CSS. Between others i found solutions, within SO too. The problem is (i think) that most of them, do not apply in asp pages.

So the question is how can i place the footer with pure CSS in Asp pages?

Before you post your answer, you have to take in mind the following.

1. I use a master page (If this one has anything to do)
2. The webpage contains the form element, which i believe destroys the placing of the footer in the bottom of the webpage.

<form name="aspnetForm" method="post" action="Default.aspx" id="aspnetForm">

So, you may start down-voting, but i think a different approach exists regarding footer placement with CSS in Asp.Net pages

Answer 1

There is not, ASP.NET is still rendering plain old HTML in the end. Add a CSS template to your masterpage just like you would create a template in an HTML site.

If you are having trouble implementing a certain CSS design, you can post those details with code and I am sure someone can help.

Answer 2

Anything that is rendered onto the browser necessarily need to be HTML (or XHTML). So the issue of CSS not taking over is not true. Already you are using a master. So design the master well with all CSS and your hearts content. The page will be rendered well. You can examin the rendered (X)HTML and see what might have gone wrong, if any.

Answer 3

Using a masterpage doesn't change anything. You can have the footer content in the masterpage and link the related CSS in it. Or if you want to make it more flexible, you can create a user control say, FooterUC.ascx, and use that in the masterpage. In both the cases, the page will be rendered as HTML and doesn't make any difference to the end user. The form tag will not messup any UI layout, as the sole purpose of it is to enable the postbacks to the server on any asp.net controls.

Answer 4

Try this sample it's pure css:

<div style="margin-top: 10px; bottom: 0px; width:100%; position: fixed; background-color: #000000; color:#ffffff;">
test</div>