I got this code from a link I found. The link is a dead post I believe is why Im asking here. Its suposed to scroll just the content portion of the page the rest is fixed. Ive added the leftside stuff and change the header,footer, and content to be 100%. From what I understand it should be capatable with most browsers. My basic need or want is to have a page that the top and left and maybe right sides are fixed all other pages appear in the center and scrolls if needed. with out using iframe.
/***************STRUCTURE***************************/
/*Reset*/
* {
margin:0;
padding:0;
}
body {
min-width:800px;
}
/* Absolute positioned logo for all browsers*/
#logo-wrapper {
position:absolute;
top:0;
left:0px;
width:120px;
height:6em;
}
/* Reset logo position to fixed for real browsers such as Firefox*/
body>#logo-wrapper {
position:fixed;
}
#header {
height:6em;
width:120px;
margin:0 auto;
}
/* Absolute positioned header for all browsers*/
#header-wrapper {
position:absolute;
top:0;
left:120px;
width:auto;
height:6em;
}
/* Reset header position to fixed for real browsers such as Firefox*/
body>#header-wrapper {
position:fixed;
}
#header {
height:6em;
width:auto;
margin:0 auto;
}
#leftside-wrapper {
width:120px;
position:absolute;
top:8em;
left:10;
padding-bottom:0px;
/* height:60px; */
}
body>#leftside-wrapper {
position:absolute;
/* position:fixed; */
}
#leftside {
width:120px;
height:60px;
margin:0 auto;
}
#content {
height:6em;
width:auto;
margin:0 auto;
}
/* Absolute positioned content for all browsers*/
#content-wrapper {
position:absolute;
top:8em;
left:120px;
width:auto;
height:auto;
}
/* Reset content position to fixed for real browsers such as Firefox*/
body>#content-wrapper {
position:fixed;
}
#footer-wrapper {
width:auto;
position:absolute;
bottom:0;
left:0;
height:30px;
}
body>#footer-wrapper {
position:fixed;
}
#footer {
width:auto;
height:30px;
margin:0 auto;
}
/*Global navigation*/
#nav {
position:absolute;
top:6em;
width:100%;
padding:0 120 0px;
height:1em;
background-repeat: repeat-x;
background-attachment: fixed;
}
#nav ul {
left:120px;
width:100%;
list-style-type:none;
}
#nav li {
display:inline;
left:120px;
width:auto;
}
#nav a {
padding:3px 3px 3px 3px;
margin-left:4px;
margin-right:4px;
color:#fff;
text-decoration:none;
display:block;
left:120px;
width:auto;
font:bolder 1.2em/100% Helvetica, sans-serif;
letter-spacing:2px;
}
#nav a:hover {
border-bottom:1px solid #fff;
}
#nav a:active {
background:#660033;
color:#fff;
}
#logo-text {
font-family:Zapf Chancery, cursive ;
font-size:25px;
margin-left:5px;
padding-top:5px;
line-height:25px;
}
/***************STYLE***************************/
body,
html{
font-family:"Lucida Grande", Geneva, Verdana, Arial, Helvetica, sans-serif;
color:#000;font-family:"Trebuchet MS", Georgia, Verdana, Arial, Helvetica, sans-serif;
background:#fff;
}
/**See nav.js for logo location and image****/
#header,
#footer {
background:#bbb;
color:#000;
}
#content {
background:#fff;
color:#000;
}
h1,
h2 {
padding:0;
margin:0 0 0 10px;
}
h1 {
font-size:1.3em;
text-align:left;
padding-top:0.5em;
}
h2 {
font-size:1.1em;
padding-top:1em;
margin-top:0;
}
#footer p {
margin:0 0 0 5px;
padding:0;
}
#footer a {
color:#fff;
}
ul, p {
font-size:0.85em;
line-height:1.45em;
}
p {
margin:0 10% 0 10px;
padding-bottom:10px;
}
code, pre {
color:#336600;
font-family:font-family:Courier;
font-size:14px;
margin-bottom:1em;
margin-left:10px;
}
div.ad-box {
width:336px;margin:1em 5px 0 5px;
height:280px;
float:right;
clear:right;
background:#fff;
}
div.footer-ad {
width:468px;
height:15px;
padding-top:20px;
margin-left:10px;
}
#content a:link, #content a {
color:#003366;
font-weight:bold;
font-family:verdana,arial,sans-serif;
font-size:0.9em;
}
#content a:visited {
color:#660000;
}
#content a:hover {
color:#660000;
}
#content a:active {
color:red;
}