Forums

mestremind

I've been trying to add a footer <div> to my html, but for some reason it is not getting positioned where I want it to.
My absolute <div> is set to 100% but it seems to feel more than necessary as I need to scroll down on the page, even when there is not content inside the <div>, and I'm looking through a 24 in. iMac. I'm fairly new to css.

here is my code.

<!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 http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
<title>Untitled Document</title>

<link type=\"text/css\" href=\"default.css\" rel=\"stylesheet\">
<style type=\"text/css\">
<!--
.Green {color: #688b09; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px;}
.body {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #666666;
	font-size: 12px;
}
a:link {
	color: #688B09;
}
a:visited {
	color: #455D00;
}
a:hover {
	color: #455D00;
}
a:active {
	color: #688B09;
}
.heading {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #4C4C4C;
	font-size: 26px;
}
.date {font-size: 12px; font-family: Geneva, Arial, Helvetica, sans-serif; color: #FFFFFF;}
-->
</style>
</head>

<body>

  <div id=\"header\"></div>
  <div id=\"wrapper\">
  <div id=\"left\"></div>
    
<div id=\"middle\">
  <table width=\"100%\" border=\"0\" cellpadding=\"10\" cellspacing=\"0\">
    <tr>
      <td><table width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">
          <tr>
            <td align=\"center\" valign=\"top\" class=\"heading\">WEEKLY UPDATE!</td>
          </tr>
          <tr>
            <td align=\"right\" valign=\"top\" class=\"date\">MARCH 13,2009</td>
          </tr>
          <tr>
            <td align=\"left\" valign=\"top\"><p class=\"Green\">MY ARTICLE GOES HERE...</p></td>
          </tr>
          <tr>
            <td align=\"left\" valign=\"top\">Note: If you have problems viewing this template (not displaying at all or does not match the screenshot), it is probably because your version of Flash player is rather old. We suggest you to upgrade your Flash player to the latest version which can be downloaded here.<br /><br />Second Note: If you have problems viewing this template (not displaying at all or does not match the screenshot), it is probably because your version of Flash player is rather old. We suggest you to upgrade your Flash player to the latest version which can be downloaded here.</td>
          </tr>
          <tr>
            <td align=\"right\" valign=\"top\" class=\"Green\"><br /><img src=\"images/VisitBlog.png\" alt=\"TwitThis\" width=\"109\" height=\"24\" style=\"border:none;\"/></td>
          </tr>
      </table></td>
    </tr>
  </table>
    </div>
    
  <div id=\"content\">
    <table width=\"100%\" border=\"0\" cellpadding=\"12\" cellspacing=\"0\">
      <tr>
        <td align=\"left\" valign=\"top\"><span class=\"Green\">FEATURE HOME</span></td>
      </tr>
    </table>
    <p class=\"heading\">&nbsp;</p>
  </div>
  <div id=\"twitter\">
    <table width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">
      <tr>
        <td align=\"left\" valign=\"top\"><br />
          <span class=\"Green\">TWITTER UPDATE:</span><br /><br />
          <div id=\"twitter_div\">
                                <div class=\"body\" id=\"twitter_update_list\">            </div>
          <a href=\"http://twitter.com/mestremind\" id=\"twitter-link\" style=\"display:block;text-align:right;\"><br /><img src=\"images/FollowMe.png\" alt=\"TwitThis\" width=\"109\" height=\"24\" style=\"border:none;\"/></a></div>
          <script type=\"text/javascript\" src=\"http://twitter.com/javascripts/blogger.js\"></script>
        <script type=\"text/javascript\" src=\"http://twitter.com/statuses/user_timeline/mestremind.json?callback=twitterCallback2&amp;count=8\"></script></td>
      </tr>
    </table>
  </div>
  </div>
  <div id=\"footer\"></div>
</body>
</html>

here is my css:

@charset \"UTF-8\";
/* CSS Document */


body {
	height:100%;
	width:100%;
	margin:0;
	font-size:12px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color:#666666;
}



#header { 
	background-image: url(images/PlaceHolder.jpg);
	background-position: left;
	background-repeat: no-repeat;
	height: 350px;
	
	list-style: none;
	
}


#wrapper {
    
    color : #333333;
   clear: both;
   position: absolute;
    
}

#left { 
	width: 30px;
	height: 100%; 
	list-style: none;
	position: absolute;
	
	
}


#middle {
	width: 247px;
	height: 100%;
	background-image: url(images/GreyGradient.jpg);
	background-position: top;
	background-repeat: repeat-x;
	background-color: #d8d8d8;
	position: absolute;
	margin:0 0 0 30px;
}

#content { 
	width: 371px;
	height: 100%;  
	margin:0 0 0 277px;
	list-style: none;
	position: absolute;
	
}

#twitter { 
	width: 247px;
	height: 100%; 	
	margin:0 0 0 648px;
	list-style: none;
	position: absolute;
	
}

#footer { 
	height: 100px; 
	background-color:#000000;

  

	
}





/* Twitter CSS starts here */

#twitter_div { 
	width: 247px; 
	list-style: none;
	
}

#twitter_update_list { 
	 
	font-size: 11.5px;
	list-style: none;
}

#twitter_update_list li { 
	list-style: none;
	margin-bottom: none;
	padding: 8px;
	color: #666666;
	background: url(images/TwitterGradient.jpg) top  repeat-x;
	background-color:#ececea;
	text-align: left;
	
	font-family: Geneva, Arial, Helvetica, sans-serif;
	
}

/* Twitter CSS ends here */

Any help on how I can achieve this will be much appreciated!

Robskiwarrior

you got a live link there by chance? :)

EDIT: I would remove the CSS from your head and put it in your external sheet though

box

Why are you using position:absolute anyway? Why are you using tables? Remove the CSS from your head, it'll only confuse matters. You have many problems there before you need to worry about your footer position ;)

treehouse : what would you like to learn today?

Forums

Placing footer after absolute