I've been searcing the web and this forum and I can't seem to find a post with someone looking for the same thing.
I've been able to figure out how to have a header, content and a footer. But what I would like to have is a footer that is visible all the time and the content that scrolls. No matter how big the content is the footer should always be on the main screen.
I found one site that had what I wanted but when I sampled the code it didn't work in IE7 on my screen.
http://www.webpelican.com/web-tutorials/css-frames-tutorial/
I don't know which CSS property i'm missing but all I wanted to do was use the tutorial mentioned above and it won't even work...this is so frustrating.
This is code so far for the homepage that i'm working on, the footer will always stay below the longest content.
body
{
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
background-color: #FFFFFF;
}
#container
{
width: auto;
background: #FFFFFF;
margin: 0 auto;
text-align: left;
}
#header
{
width:100%;
height:100%;
float:left;
margin-top: 10px;
background-color: #1E1E1E;
filter: alpha(opacity=50);
}
#banner
{
width:100%;
height:100%;
float:none;
background-color: #FFFFFF;
}
#mainContent
{
background: #FFFFFF;
}
#footer
{
font:Arial, Helvetica, sans-serif;
font-size:12;
padding: 0 0px;
background-color: #FFFFFF;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-top-color: #000000;
position: fixed;
left: 0px;
bottom: 0px;
}
#mainContent #content
{
float:left;
width: 351px;
background-color: #FFFFFF;
border: thin none #000000;
height: 264px;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
left: 6px;
top: 321px;
}
#mainContent #leftmenu
{
float:left;
width:20%;
border: thin none #000000;
background-color: #FFFFFF;
}
#mainContent #rightmenu
{
width: auto;
}
#mainContent #divider
{
float:left;
padding-left: 10px;
padding-right: 5px;
left: 371px;
top: 324px;
}