Fixed Header and Footer

[dutcbhboy83]

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;

}

[rarebit]

Do your header, do your footer, for scrolling content look at 'overflow' (http://www.w3schools.com/Css/pr_pos_overflow.asp), but i've just looked at the example and I believe the main part in question is 'bottom: 0px;', maybe fixed or absolute etc...

[BoltZ]

Ok obviusly from the site you provided you should know they are called CSS frames and then just google that. Also please put your code in code tags as they make debugging easier