Home > DeveloperSection > Forums > How to align the footer to bottom of page without using footer tag
Samuel Fernandes
Samuel Fernandes

Total Post:154

Points:1082
Posted on    September-25-2013 7:51 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 1 Reply(s)
 1054  View(s)
Rate this:

I am a beginner and i have a doubt.i created the Html with table and i need to place the footer at the bottom of the page without using footer tag.is there any way to place the footer at the bottom by using table? it will be helpful

<table>              

    <tr><h2><img src="lock.jpg"  width="80" height="30"/>Welcome to Locker</h2></tr>    

    <tr><td>

 <table align="center">

<tr>

<td align="right"><h4><p> Lock name:</p></h4>

</td>

<td align="left">

    <h4><input type="text" maxlength="8" name="lock" onkeyup="return AllowLock()"/>

</h4></td>

<td>

<h6 id="errfn"> </h6>

</td>

     </tr>

<tr>

<td align="right"><h4><p> Key:</p></h4></td>

    <td align="left"><h4><input type="text" maxlength="8" name="keys" onkeyup="return AllowKey()"/>

</h4></td>

<td>

<h6 id="error"></h6></td>

    </tr>

<tr>

<td align="right"></td>

    <td align="left"><input id="gobutton" type="submit" value="Go!"/></td>

</tr>

    </form>

     </table>

        </td></tr>

        <tr><td>

<p id="about">About</p>

<p id="contact">Contact us</p>

<p id="career">Careers</p>

    <p id="press">Press</p>

</tr>

</td>

</table>



Pravesh Singh

Total Post:411

Points:2881
Posted on    September-25-2013 9:57 AM

Hi Samuel,

You can place any element to the bottom by just adding this css to any of your classes or id's. //CSS

{

position:absolute;

width:100%;

bottom:0px;

}

//Practical Usage

<html>

<head>

    <style type="text/css">

       .footer{

           position:absolute;

           width:100%;

           bottom:0px;

           }

    </style>

</head>

<body>

<table class="footer">

<td>Footer Goes Here</td>

</table>

    </body>

</html>


Don't want to miss updates? Please click the below button!

Follow MindStick