make footer center align and bottom of page in asp.net

Question

4.00/5 (1 vote)

See more:

I am facing one problem

my footer in page stays down but it not at center. its right aligned now

I want make it to center aligned.

earlier it was not even staying down but then applied .footerContent css which is mentioned below.

after applying .footerContent. it solved my problem of footer not being bottom of page. now its at bottom but shows extensively right . half of footer gets cut.

can u guys correct n show me whats wrong.

heres error screen

see here[]

heres markup

XML

<body>
    <form id="form1" runat="server">
    <div id="wrapper">
        <div id="header" runat="server">
        <%-- Menu goes here --%>
      </div>
      <div id="masterpageContent" class="footer">
        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
      </div>
    </div>
    <div class="footerContent">
        <div class="footerbrd">
        </div>
        <p class="clear">
        </p>
        <div class="footer">
            <div class="c1 fleft">
                Best viewed in IE8 and above with Resolution 1024x768
            </div>
            <div class="c2 fleft">
                (c) Copyright 2013
                <br />
                All Rights Reserved.
            </div>
            <div class="c3 fright">
                Site by abc Team
            </div>
            <p class="clear">
            </p>
        </div>
    </div>
    </form>
</body>

heres css

HTML

.footerbrd {width:929px; height:1px; background:#ef0b14; margin:0px auto;}
.footer {width:929px; margin:0px auto; padding:5px 0px; color:#666666;}
.footer .c1 {width:300px; margin:0px; padding:0px;}
.footer .c2 {width:375px; margin:0px; padding:0px; text-align:center;}
.footer .c3 {width:254px; margin:0px; padding:0px 0px 0px 0px; text-align:right;}
ul.foot {list-style:none; padding: 0px 0px; margin: 0px;}
ul.foot li {list-style:none; float:left; line-height:12px;}
ul.foot li a {color:#666666; padding: 2px 10px; font-size:11px; text-decoration:none; display:block; float:left;}

.footerContent { 
	position: absolute;
    height: 50px;
    width: 929px;
    margin: auto;
    bottom: 0px;
}

Posted 26-Sep-13 19:15pm

Tushar Sale

Updated 7-Dec-19 6:38am

v3

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

jaideepsinh · Answer 1 · 2013-09-26T19:35:00

Use center tag like below :

XML

<div class="footerContent">
<center>
        <div class="footerbrd">
        </div>
        <p class="clear">
        </p>
        <div class="footer">
            <div class="c1 fleft">
                Best viewed in IE8 and above with Resolution 1024x768
            </div>
            <div class="c2 fleft">
                (c) Copyright 2013
                <br />
                All Rights Reserved.
            </div>
            <div class="c3 fright">
                Site by abc Team
            </div>
            <p class="clear">
            </p>
        </div>
</center>
    </div>

Accept as answer and vote if help.

dnisko · Answer 2 · 2014-03-15T00:39:00

I found this question on google and found the solution to your problem (it is a bit late, but for everyone who is looking)

The page should look like this:

HTML

<html>
    <head runat="server">
        <title></title>

        <link rel="Stylesheet" href="../Scripts/layout.css" />

    </head>
    <body>
        <form id="form1" runat="server">
        <div id="wrapper">
            YOUR PAGE HERE      

          <div id="push">
          </div>
        </div>
    
        <div class="footer">
        YOUR FOOTER HERE    
        </div>
        </form>
    </body>
</html>

And in the 'layout.css' file (save it in the 'Scripts' folder in your website), add this:

CSS

.wrapper 
{
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -20px;  /*the bottom margin is the negative value of the footer's height*/
}
.push
{
    height: 20px;  /*'.push' must be the same height as 'footer'*/
}
.footer
{ 
    position: absolute;
    height: 20px;
    width: 99%;
    margin: auto;
    bottom: 0px;
    text-align: center;
}

Murali0195 · Answer 3 · 2014-03-15T01:53:00

Solution 3

Hi..
Can u see this one!.
how to set footer at bottom only for all pages[^]

Posted 15-Mar-14 1:53am

Murali0195

make footer center align and bottom of page in asp.net

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0