Placing footer <div> after absolute <div>

[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.

Code:

WEEKLY UPDATE! MARCH 13,2009 MY ARTICLE GOES HERE… 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. 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.

FEATURE HOME

 

TWITTER UPDATE:

here is my css:

Code:

@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!

[Rob MacKay]

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

[Author]

Posts