www.webdeveloper.com
Results 1 to 2 of 2

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

  1. #1
    Join Date
    May 2008
    Posts
    15

    Question text at bottom of div .... help!

    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

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles