How to have the footer remain at the bottom of the page?

Dear Paul,
You are correct I add this <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> and it works perfectly.Now at my last line I have this as below. Where must the padding code must go? Thank you.
<tr>
<td>
<input type=Submit value=submit>
</td>
<td>
<input type=Reset value=Reset>
</td>
</tr>

Dear Rayzur,
Thank you for the answer. I have one more problem if you visit this site http://183.78.169.56/test/test1.html. If you just key in some value into the name field and then you go to date of birth field and when you back and click on the name field you will notice the words either move once down or up once in text box. How to avoid this ya? Thank you.

Is there a live demo we can see? It’s hard to pinpoint just looking at code.

Place it on your form table


table {
padding:0 0 20px;
}

^ You need to add left:0; and bottom:0; just like Paul explained in the post above.

[B]#footer [/B]
{ 
background-color:#ccc; 
height:[B]19px;[/B] 
width:1024px; 
font-family:Calibri;
[B]position:fixed;
left:0;
bottom:0;[/B]
}

And then you need to add at least 19px bottom padding to the element above the footer, also explained above. :slight_smile:

i tried. i mean i tried to revamp your tables markup but gone crazy and had to drop that. you have </div> appearing out of the blue. you have a whole lot of wrongs going on. so i just had to give up. sorry.

you’ll have to manage that by your own, rewriting a decent markup for your page. if you manage to do so, i’ll be more than happy to revisit this matter then.

but i did manage to somewhat use your markup to demonstrate tabs. it’s crude and simple but you’ll get the idea.

addClient.html

<html><head>
  <title>Get rid of tables, please!</title>
  <link rel="stylesheet" type="text/css" href="my1.css" media="all"> 
</head><body>

<div id="main"> 
  <div id=logo>
    <table width=1000>
      <tr>
        <td width=300><img src="images/logo.html"></td>
        <td width=350 align=center><label class=description for=element_1>Admin Page</label></td>
        <td width=350 align=right></td>	
      </tr>
      </table>
    </div>

    <div id="nav"> 
      <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Solutions</a></li>
      <li><a href="#">Customer</a></li>
      <li><a href="#addclient">Add Client</a></li>
      <li><a href="#clients">Clients</a></li>
      </ul>
    </div> 

    <div id="tabs">
      <h2 id="addclient" class="form_desicription">AddClient</h2>

      <table id="tab1">
      <tr>
        <td width=350 valign="top">
        
          <table>
            <tr>
              <td>				
              <label class=description for=element_1>Name<font color="red">*</font></label> 
              </td>
              <td>
              <input class="text"  id="clientName" name="clientName" value="">  
              </td>
            </tr>
            
            <tr>
              <td><p class=error id="clientNameError" ></p></td>
              <td></td>
            </tr>

            <tr>
            <td>				
              <label class="description">Contact Person<font color="red">*</font></label>
              </td>
              <td>
              <input class="text" id="clientContactPerson" name="clientContactPerson" value=""> 
              </td>
            </tr>	
            <tr>
              <td><p class=error id="clientContactPersonError" ></p></td>
              <td></td>
            </tr>
          </table>
        
        </td>	
        
        <td width=350 valign="top">		
          <table>	
            <tr>
            <td>				
            <label class=description for=element_1>Address<font color="red">*</font></label> 
            </td>
            <td>
            <input class="text" id="clientAddress" name="clientAddress" value=""> 	  
            </td>
            </tr>	
            <tr>
            <td><p class=error id="clientAddressError" ></p></td>
            <td></td>
            </tr>

            <tr>
            <td>				
            <label class=description for=element_1>Contact Number<font color="red">*</font></label> 
            </td>
            <td>
            <input class="text" id="clientContactNumber" name="clientContactNumber" value=""> 	  
            </td>
            </tr>	
            <tr>
            <td><p class=error id="clientContactNumberError" ></p></td>
            <td></td>
            </tr>

            <tr>
            <td>		
              <input type=hidden value= name=clientID>	
              <input type=hidden value= name=editVal>	
              <input class="buttons" type="Submit" name="Add" value="Add">
            </td>
            <td><input class="buttons" type="Reset" name="Reset" value="Reset" onclick="location.href='addClient.php'">
            </td>
            </tr>	
          </table>
        </td>
      </table>
 
      <h2 id="clients" class="form_desicription">Clients</h2>
      
        <table id="tab2">
        <tr id="gridHeader">
          <td width="5&#37;">No.</td>                
          <td width="20%">Name</td>               
          <td width="10%">Contact Person</td>
          <td width="10%">Contact Number</td>
          <td width="10%">Edit</td>
          <td width="10%">Delete</td>
        </tr>

        <tr id='gridRow'>
          <td>1</td>
          <td>test1</td>
          <td>wessss</td>
          <td>017</td>
          <td><a href="addClient4204.html?editVal=1"><img src="images/editIcon.gif" alt="Edit Client" width="16" height="16" border="0"></a></td>
          <td> <a href="addClient589e.html?deleteVal=1"><img src="images/deleteIcon.gif" alt="Edit Client" width="16" height="16" border="0"></a></td>
        </tr>
        
        <tr id='gridRow'>
          <td>2</td>
          <td> test2</td>
          <td> mr</td>
          <td> 017</td>
          <td> <a href="addClient9bbb.html?editVal=8"><img src="images/editIcon.gif" alt="Edit Client" width="16" height="16" border="0"></a></td>
          <td> <a href="addClient86c2.html?deleteVal=8"><img src="images/deleteIcon.gif" alt="Edit Client" width="16" height="16" border="0"></a></td>
        </tr>
        
        <tr id='gridRow'>
          <td >3</td>
          <td> test3</td>
          <td> mr</td>
          <td> 018</td>
          <td> <a href="addClient2023.html?editVal=6"><img src="images/editIcon.gif" alt="Edit Client" width="16" height="16" border="0"></a></td>
          <td> <a href="addClient24fd.html?deleteVal=6"><img src="images/deleteIcon.gif" alt="Edit Client" width="16" height="16" border="0"></a></td>
        </tr>
        
        <tr id='gridRow'>
          <td >4</td>
          <td> test4</td>
          <td> mobil</td>
          <td> 017</td>
          <td> <a href="addClient543a.html?editVal=5"><img src="images/editIcon.gif" alt="Edit Client" width="16" height="16" border="0"></a></td>
          <td> <a href="addClient71fd.html?deleteVal=5"><img src="images/deleteIcon.gif" alt="Edit Client" width="16" height="16" border="0"></a></td>
        </tr>
        
        <tr>
          <form id="form2" name="form2" method="post" action="#">
          <td colspan="5" id="gridHeader">
            <label>
            <span class="style17">Search</span> 
            <input type="hidden" name="driverID" id="driverID">
            <input type="text" name="searchcm" id="searchcm"  onKeyPress="checkEnter(event)">
          </label> 

          </td>
          <td width="11%" bordercolor="#999999" id="gridHeader" >
            <div align="center">
              <select onchange="this.form.submit();"  name="selectpage" id="selectpage">
                <option  selected="selected"  value="1">1 </option>
              </select>
            </div>
          </td>
        </tr>
        </table>
    </div>

  <div id="nav"> 
    <ul>
    <li><a href="#">Main Page</a></li>
    <li><a href="#">Print Page</a></li>
    <li><a href="#">Log Out</a></li>
    </ul>
  </div> 

</div>

</body></html>

my1.css

* { 
padding:0px; 
margin:0px; 
} 
body 
{ 
background:#ffffff; 
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif; 
font-size:small; 
margin:8px 0 16px; 
margin: 0; 
padding:0; 

} 

#nav 
{ 
background-color:#ccc; 
height:19px; 
width:1024px; 
font-family:Calibri;
}
 
#nav ul {
list-style-type: none;
}

#nav li {
    float: left; position: relative;
}
 
#nav li a {
padding-right: 20px;
padding-left: 15px;
display: block;
line-height: 20px;
text-decoration: none;
font-family: Calibri;
font-size: 15px;
color: #371C1C;
}
 
#nav a:hover,
#nav a:focus {
    text-decoration:none;
}

h2.form_desicription
{
	clear:left;
	font-family: Calibri;
  font-size: 18px;
  color: #371C1C;
	
}


input.text
{
	background:#fff url(../images/shadow.html) repeat-x top;
	border-bottom:1px solid #ddd;
	border-left:1px solid #c3c3c3;
	border-right:1px solid #c3c3c3;
	border-top:1px solid #7c7c7c;
	color:#333;
	font-family: Calibri;
	font-size:15px;
	font-weight:700;
	line-height:normal;
	padding:2px 0;
}

label.description
{
	border:none;
	color:#222;
	display:block;
	font-family: Calibri;
	font-size:15px;
	font-weight:700;
	line-height:150%;
	padding:0 0 1px;
}

input.file
{
	color:#333;
	font-family: Calibri;
	font-size:13px;
	font-weight:700;
	line-height:150%;
	margin:0;
	padding:2px 0;
}

select.select
{
	color:#333;
	font-family: Calibri;
	font-size:15px;
	font-weight:700;
	margin:1px 0;
	padding:1px 0 0;
	background:#fff url(../images/shadow.html) repeat-x top;
	border-bottom:1px solid #ddd;
	border-left:1px solid #c3c3c3;
	border-right:1px solid #c3c3c3;
	border-top:1px solid #7c7c7c;
}

textarea.textarea
{
	background:#fff url(../images/shadow.html) repeat-x top;
	border-bottom:1px solid #ddd;
	border-left:1px solid #c3c3c3;
	border-right:1px solid #c3c3c3;
	border-top:1px solid #7c7c7c;
	color:#333;
	font-family: Calibri;
	font-size:15px;
	font-weight:700;
	margin:0;
	width:99%;
}

input.button_text
{
	overflow:visible;
	padding:0 7px;
	width:auto;
}

.buttons input
{
	font-family: Calibri;
	font-size:13px;
	font-weight:700;
	margin-right:5px;
}

span.required
{
	border:none;
	color:red;
	display:block;
	font-family: Calibri;
	font-size:15px;
	font-weight:700;
	line-height:150%;
	padding:0 0 1px;
}

#gridHeader 
{ 
background-color:#ccc; 
font-size:12px;
font-color:#ffffff;
font-family:Calibri;
}

#gridRow 
{ 
background-color:#EFEEEE; 
font-size:12px;
font-family:Calibri;
}

p.error
{
	border:none;
	color:red;
	display:block;
	font-family: Calibri;
	font-size:12px;
	font-weight:700;
	line-height:150%;
	padding:0 0 1px;
}
span.clearSearch
{
	font-family: Calibri;
	font-size:12px;
	font-weight:700;
	line-height:150%;
}
span.statusOk
{
	color: blue;
	font-family: Calibri;
	font-size:14px;
	font-weight:700;
	line-height:150%;

}
span.statusFailed
{
	color:red;
	font-family: Calibri;
	font-size:14px;
	font-weight:700;
	line-height:150%;

}

#tabs 
{
  height:200px;
  overflow:hidden;
}

#tab1, #tab2
{
  padding-bottom:100px;
}

Dear Noonnope,
Any good sample describing your tab method and representing the data grid? Thank you.

Dear Shadow,
Thank you for you information. So if I use your table method then how can I get the styling done I dont see you apply any of the css into it? So about the arrangement first I have one div say is left then div center and then div right. So just put the div or must I do something with the float etc settings.

I’m with noonnope on that – it’s too wide… sure if the user has a 1920x1200 display it’s “nice” to go that wide, but you show that to a netbook user and they’re gonna boot you in the crotch.

THOUGH, I would probably stack them as floats and lose all the fixed width nonsense. That way on narrow displays it would drop down, while on wide displays it’s all there going across. Best of both worlds.

As to the code, the two side-by-side sections I’d wrap in DIV’s inside the fieldset…


		<div>
	  	<label for="clientName">
	  		Name<b>*</b>
			  <input id="clientName" name="clientName" value="" />
			</label>  
			<span id="clientNameError"></span>
  		<br />
			
			<label for="clientContactPerson">
				Contact Person<b>*</b>
		  	<input id="clientContactPerson" name="clientContactPerson" value="" /> 
		  </label>
			<span id="clientContactPersonError" ></span>
			<br />
		</div>

Later, rinse, repeat on the second one. I changed the ‘required’ to a bold tag to free up span for use as the error text (which shouldn’t be enough text to qualify as a paragraph IMHO)… again throwing away all those pointless tables and classes.

You DO have one section that is tabular data – but apparently you are unfamiliar with THEAD, TBODY and TH, all of which would let you throw those pointless classes away!

Oh, and you are aware you cannot use the same ID more than once in the markup, right? (see “gridrow”) and you also seem to be closing DIV that don’t exist and in modern code there is no such thing as a ‘border’ attribute… and there’s no reason for FORM to have a name unless you still care about supporting netscape 4. (which nobody does!)… and if the value is the same as the contents of a OPTION, you don’t need a value attribute.

Really big problem is the placement of #form2 – the only thing that can go after a TR is a TD or </TR> – putting the form around the two TD inside the TR is invalid markup… to do that the form has to go around the entire table!

Which is why my approach would look something like this:


<form id="form2" method="post" action="">

	<table>
		<colgroup>
			<col width="8&#37;" />
			<col width="32%" />
			<col width="15%" />
			<col width="15%" />
			<col width="15%" />
			<col width="15%" />
		</colgroup>
		<thead>
			<tr>
				<th>No.</th>
				<th>Name</th>
				<th>Contact Person</th>
				<th>Contact Number</th>
				<th>Edit</th>
				<th>Delete</th>
			</tr>
		</thead><tbody>
			<tr>
				<td>1</td>
				<td>test1</td>
				<td>wessss</td>
				<td>017</td>
				<td>
					<a href="addClient.php?editVal=1">
						<img src="images/editIcon.gif" alt="Edit Client" />
					</a>
				</td><td>
					<a href="addClient.php?deleteVal=1">
						<img src="images/deleteIcon.gif" alt="Delete Client" />
					</a>
				</td>
			</tr><tr>
				<td>2</td>
				<td>test2</td>
				<td>mr</td>
				<td>017</td>
				<td>
					<a href="addClient.php?editVal=8">
						<img src="images/editIcon.gif" alt="Edit Client" />
					</a>
				</td><td>
					<a href="addClient.php?deleteVal=8">
						<img src="images/deleteIcon.gif" alt="Edit Client" />
					</a>
				</td>
			</tr><tr>
				<td>3</td>
				<td>test3</td>
				<td>mr</td>
				<td>018</td>
				<td>
					<a href="addClient.php?editVal=6">
						<img src="images/editIcon.gif" alt="Edit Client" />
					</a>
				</td><td>
					<a href="addClient.php?deleteVal=6">
						<img src="images/deleteIcon.gif" alt="Edit Client" />
					</a>
				</td>
			</tr><tr>
				<td>4</td>
				<td>test4</td>
				<td>mobil</td>
				<td>017</td>
				<td>
					<a href="addClient.php?editVal=5">
						<img src="images/editIcon.gif" alt="Edit Client" />
					</a>
				</td><td>
					<a href="addClient.php?deleteVal=5">
						<img src="images/deleteIcon.gif" alt="Edit Client" />
					</a>
				</td>
			</tr><tr>
				<td colspan="5">
					<label for="searchcm">Search</label>
					<input
						type="text"
						name="searchcm"
						id="searchcm"
						onKeyPress="checkEnter(event)"
						value=""
					/>
				</td><td>
					<select
						onchange="this.form.submit();"
						name="selectpage"
						id="selectpage"
					>
						<option selected="selected">1</option>
					</select>
					<input type="hidden" name="driverID" id="driverID" value="" />
				</td>
			</tr>
		</tbody>
	</table>
</form>

Which provides all the hooks you need for that same styling.

There’s an example I use about badly coded tables that goes thus:


<table cellpadding="2" cellspacing="4" border="1" class="myTable">
	<tr>
		<td colspan="4" class="bigHeading">
			<strong>
				<font size="+1">
					Table Title
				</font>
			</strong>
		</td>
	</tr><tr>
		<td>&nbsp;</td>
		<td align="center" class="heading"><strong>Col 1</strong></td>
		<td align="center" class="heading"><strong>Col 2</strong></td>
		<td align="center" class="heading"><strong>Col 3</strong></td>
	</tr><tr>
		<td align="left" class="sideHeading"><strong>Row 1</strong></td>
		<td align="center" class="data">Data 1-1</td>
		<td align="center" class="data">Data 1-2</td>
		<td align="center" class="data">Data 1-3</td>
	</tr><tr>
		<td align="left" class="sideHeading"><strong>Row 2</strong></td>
		<td align="center" class="data">Data 2-1</td>
		<td align="center" class="data">Data 2-2</td>
		<td align="center" class="data">Data 2-3</td>
	</tr><tr>
		<td align="left" class="sideHeading"><strong>Row 3</strong></td>
		<td align="center" class="data">Data 3-1</td>
		<td align="center" class="data">Data 3-2</td>
		<td align="center" class="data">Data 3-3</td>
	</tr>
</table>

Which is really bad, but you’ll see nonsense like that all over the Internet from the people who slap a modern HTML 4 doctype on their HTML 3.2.

So what’s wrong with that? NONE of the classes should even be neccessary, or the align attributes, or the strong tags for that matter! This is because there are tags for tables called TH and CAPTION… as well as the grouping tags THEAD and TBODY (there’s also TFOOT, but I advise against it’s use as it’s unreliable)… even the non-breaking space isn’t needed since you could just say empty-cells:show;

Written properly, even under HTML 3.2 the markup should be more like this:


<table cellspacing="4" class="myTable">
	<caption>Table Title</caption>
	<thead>
		<tr>
			<td></td>
			<th>Col 1</th>
			<th>Col 2</th>
			<th>Col 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Row 1</th>
			<td>Data 1-1</td>
			<td>Data 1-2</td>
			<td>Data 1-3</td>
		</tr>
		<tr>
			<th>Row 2</th>
			<td>Data 2-1</td>
			<td>Data 2-2</td>
			<td>Data 2-3</td>
		</tr>
		<tr>
			<th>Row 3</th>
			<td>Data 3-1</td>
			<td>Data 3-2</td>
			<td>Data 3-3</td>
		</tr>
	</tbody>
</table>

… and we could ditch the cellspacing if FF and IE weren’t total idiots about the supporting border-spacing property properly! (Yeah!!! WOHHOO!!! add all that CSS3 when CSS2 doesn’t even work right!)

It’s part of why I often say the problem with tables in people’s code isn’t always the use of tables so much as many people programming them are unaware of TH, CAPTION, THEAD and TBODY… or an understanding of specificity, semantics or inheritance.

You can put the content into three divs, give them a width of 33% or less, and float them left. That’s just one possible way.

First add a full doctype and then adjust the line-height of the input.


input.text
{
    line-height:19px;
/* or line-height:normal;*/
}


Dear Shadow,
Here is a sample page but unforturnately I build it using tables it is a .php page http://183.78.169.56/test/addClient.php. So how do you think my html should look like if I want to have 3 columns like this? Thank you.

Dear All,
I have update my .css ok it work well in firefox. Unfortunately it is not working on IE 7. I dont understand this part “And then you need to add at least 19px bottom padding to the element above the footer, also explained above”. Must I add it at my button is it? Thank you.

Dear Samanime,
Below is my css file

* { 
padding:0px; 
margin:0px; 
} 
body 
{ 
background:#ffffff; 
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif; 
font-size:small; 
margin:8px 0 16px; 
margin: 0; 
padding:0; 

} 

#header 
{ 
background-color:#ccc; 
height:19px; 
width:1024px; 
font-family:Calibri;
}
 
#header ul {
list-style-type: none;
}

#header li {
    float: left; position: relative;
}
 
#header li a {
padding-right: 20px;
padding-left: 15px;
display: block;
line-height: 20px;
text-decoration: none;
font-family: Calibri;
font-size: 15px;
color: #371C1C;
}
 
#header a:hover,
#header a:focus {
    text-decoration:none;
}
#header 
{ 
background-color:#ccc; 
height:19px; 
width:1024px; 
font-family:Calibri;
position:fixed;
}
 
#footer ul {
list-style-type: none;
}

#footer li {
    float: left; position: relative;
}
 
#footer li a {
padding-right: 20px;
padding-left: 15px;
display: block;
line-height: 20px;
text-decoration: none;
font-family: Calibri;
font-size: 15px;
color: #371C1C;
}
 
#footer a:hover,
#footer a:focus {
    text-decoration:none;
}

h2.form_desicription
{
	clear:left;
	font-family: Calibri;
  font-size: 18px;
  color: #371C1C;
	
}


input.text
{
	background:#fff url(../../../images/shadow.gif) repeat-x top;
	border-bottom:1px solid #ddd;
	border-left:1px solid #c3c3c3;
	border-right:1px solid #c3c3c3;
	border-top:1px solid #7c7c7c;
	color:#333;
	font-family: Calibri;
	font-size:15px;
	font-weight:700;
	line-height:150&#37;;
	padding:2px 0;
}

label.description
{
	border:none;
	color:#222;
	display:block;
	font-family: Calibri;
	font-size:15px;
	font-weight:700;
	line-height:150%;
	padding:0 0 1px;
}

input.file
{
	color:#333;
	font-family: Calibri;
	font-size:13px;
	font-weight:700;
	line-height:150%;
	margin:0;
	padding:2px 0;
}

select.select
{
	color:#333;
	font-family: Calibri;
	font-size:15px;
	font-weight:700;
	margin:1px 0;
	padding:1px 0 0;
	background:#fff url(../../../images/shadow.gif) repeat-x top;
	border-bottom:1px solid #ddd;
	border-left:1px solid #c3c3c3;
	border-right:1px solid #c3c3c3;
	border-top:1px solid #7c7c7c;
}

textarea.textarea
{
	background:#fff url(../../../images/shadow.gif) repeat-x top;
	border-bottom:1px solid #ddd;
	border-left:1px solid #c3c3c3;
	border-right:1px solid #c3c3c3;
	border-top:1px solid #7c7c7c;
	color:#333;
	font-family: Calibri;
	font-size:15px;
	font-weight:700;
	margin:0;
	width:99%;
}

input.button_text
{
	overflow:visible;
	padding:0 7px;
	width:auto;
}

.buttons input
{
	font-family: Calibri;
	font-size:13px;
	font-weight:700;
	margin-right:5px;
}

span.required
{
	border:none;
	color:red;
	display:block;
	font-family: Calibri;
	font-size:15px;
	font-weight:700;
	line-height:150%;
	padding:0 0 1px;
}

#gridHeader 
{ 
background-color:#ccc; 
font-size:12px;
font-color:#ffffff;
font-family:Calibri;
}

#gridRow 
{ 
background-color:#EFEEEE; 
font-size:12px;
font-family:Calibri;
}

p.error
{
	border:none;
	color:red;
	display:block;
	font-family: Calibri;
	font-size:12px;
	font-weight:700;
	line-height:150%;
	padding:0 0 1px;
}
span.clearSearch
{
	font-family: Calibri;
	font-size:12px;
	font-weight:700;
	line-height:150%;
}
span.statusOk
{
	color: blue;
	font-family: Calibri;
	font-size:14px;
	font-weight:700;
	line-height:150%;

}
span.statusFailed
{
	color:red;
	font-family: Calibri;
	font-size:14px;
	font-weight:700;
	line-height:150%;

}

Add “position:fixed;” to your footer. Something like that:

#footer {
    position:fixed;
}

Hope it will be helpful

Dear Noonnope,
Can you tell me which is the </div> appearing out of the blue? I would like to research further on it. I tried your code in the above I fail to see the tab? Where it suppose to appear ?

<td> 
 <a href="addClient4204.html?editVal=1">
  <img src="images/editIcon.gif" alt="Edit Client" width="16" height="16" border="0">
 </a>
[COLOR="Red"]</div>[/COLOR]
</td> 

try clicking Add Client, Clients links, see what happens.