text at bottom of div .... help!

**chris1988** · 07-26-2008 08:42 AM

basically i want to centre and position the text of the footer to the bottom. The footer also has a image.

heres the html ...

Code:

<?xml version="1.0" encoding="iso-8859-5"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta name="generator" content="HTML Tidy, see www.w3.org" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5" /> 

<title>CSS Table Layout</title>

<!-- note following link to stylesheet -->
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
<!--

<!--[if lt IE 7]>   <link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->

body {
	background-image: url();
}
body {
	background-color: #E0EFF6;
}
-->
</style></head>
<div id="container">
<div id="header">Header</div>
<div id="left">
  <h1>Links</h1>
  <p>Link1<br />
    Link2<br />
    Link3</p>
  <p><br />
      <br />
  </p>
  <div id="adverts">
    <p>Adverts in this column</p>
    <p>&nbsp;</p>
    <p><br />
      <br />
    </p>
  </div>
</div>
<div id="center">
  <h1>Title Placeholder</h1>
  <p>The centre of the page!! 
  <p>
  <p>
  <p>
  <p>
  <p>  
  <p>
</div>
<div id="right"><h1>The right colunm of the field</h1></br>
  <p>Other information and links</p>
 
  </div>
 <div class="clearfooter"></div>
</div>

<div id="footer">
  <p>
  Copyright &copy; 2008 Chris Heirani</p>
</div>
</body>
</html>

heres the CSS ...

Code:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333;
text-align: center;
margin: 0px;
padding: 20px 0px 0px 0px;
}

#header {
margin: 0px;
padding: 0px;
height: 270px;
width: 955px;
text-align: center;
background-image: url(images/top.gif);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
}
#left {
margin: 0px;
width: 160px;
padding: 10px 20px 0px 20px;
float: left;
}
#adverts {
margin: 2px;
width: 100px;
padding: 10px 40px 0px 20px;
float: left;
}

#center {
width: 504px;
padding: 10px 20px 0px 20px;
float: left;
margin: 0px
}
h1 {
font-size: 14px;
margin: 0px;
padding: 0px;
text-align:center
}
#right {
padding: 10px 20px 0px 20px;
height: auto;
width: 160px;
float: left;
margin: 0px 0px 0px 6px;
}

html, body {height: 100%; }
#container {min-height: 100%;   margin-bottom: -10px;   position: relative;}
#footer {
height: 270px;
width: 955px; 
position: relative;
background-image: url(images/bottom.gif);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
}
.clearfooter {height: 10px;   clear: both;}
#container {   height: 100%;}

	

}

Thanks for your help an example would be good as im new to all this. cheers

**Centauri** · 07-26-2008 10:49 AM

If there is nothing else to go in the footer, you could use :

Code:

#footer p {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  text-align: center;
}

Thread: text at bottom of div .... help!

Thread Tools

Display

text at bottom of div .... help!

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions