Okay I spent a long time adding all the code from your example that I thought was necessary, it works but it’s not perfect:
• I can’t find how to position the main content properly (#section_article_main), it should be at the right of the sidebar (opposite of your example). EDIT, just now I added margin, is it the appropriate solution ?
• The scroll bar is always present even if the page is longer than the content and even if I remove overflow-y:scroll;
• #section_article_main does appear bellow the header and footer (I thought padding was supposed to prevent this) - this is a problem because it hides the background - is there a way to make it invisible below the header ?
• another issue (while I’m here): I can’t find how to position #nav_main at the bottom of #header_main
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-language" content="en">
<meta name="author" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<!-- HTML5 tags support for IE http://remysharp.com/2009/01/07/html5-enabling-script/ http://html5shim.googlecode.com/svn/trunk/html5.js -->
<!--[if lt IE 9]>
<script type="text/javascript" src="http://domain.net/include/js/html5.js"></script>
<![endif]-->
<script type="text/javascript" src=""></script>
<link href="" media="screen" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<style type="text/css">
html{
height:100%;
/* overflow-y:scroll; */ /*keep scrollbar position present if FF at all times*/
}
body{
height: 100%;
margin: 0px;
padding: 0px;
color: white;
background-color:#000000;
background-image: -moz-radial-gradient(50% 300px, ellipse cover, #0028c2, #000000 70%);
background-image: -webkit-radial-gradient(50% 300px, ellipse cover, #0028c2, #000000 70%);
background-image: -o-radial-gradient(50% 50%, circle cover, #2213ab, #000029 33%);
background-image: -ms-radial-gradient(50% 50%, circle cover, #2213ab, #000029 33%);
background-image: radial-gradient(50% 50%, circle cover, #2213ab, #000029 33%);
background-repeat: no-repeat;
}
#header_main{
position:fixed;
z-index:10;
left: 0px;
top: 0px;
height: 150px;
width: 100%;
text-align: center;
}
#section_header{
margin: auto;
width: 970px;
border: red 1px solid;
text-align: left;
}
#nav_main{
text-align: right;
background-color: #c37b00;
}
#article_main{
width: 970px;
min-height: 100%;
margin: 0 auto;
border: green 1px solid;
}
#section_article_main{
width: 730px;
padding:150px 0 35px 0; /*padding protects content from sliding under header & footer.*/
background-color: #eeefee;
color: black;
border: yellow 2px dashed;
}
#nav_toc{
float:left;/*IE8 needs a floated parent for the fixed div to kill RP/AP bug*/
width: 215px;
}
#section_nav_toc{
position: fixed;
width: 214px;/*15px total width with left border*/
top: 150px;/*total header height*/
bottom: 35px;/*total footer height*/
overflow: auto;/*insure access to text at smaller viewport heights*/
background-color: #001665;
opacity: 0.75;
border: 1px solid white;
}
a{
color: #c37b00;
font-weight: bold;
}
pre{
white-space: pre-line;
}
#footer_main{
position: fixed;
z-index: 10;
left: 0px;
bottom: 0px;
height: 35px;
width: 100%;
text-align: center;
}
#aside_footer_main{
margin: auto;
width: 970px;
border: red 1px solid;
text-align: left;
}
</style>
</head>
<body>
<header id="header_main">
<section id="section_header">
<img src="http://domain.net/include/images/logo/domain.net%20logo%20black%20notINT%20supsamp%20100px.png" alt="domain.net logo" title="Home & About domain.net" />
domain.net
tagline
slogan
<nav id="nav_main">
category 1, category 2, category 3, category 4,
</nav>
</section>
</header>
<article id="article_main">
<nav id="nav_toc">
<section id="section_nav_toc">
TOC
<ul>
<li><a href="#">What is this site about ?</a></li>
<li><a href="#">Who runs this site ?</a></li>
<li><a href="#">How is this site made ?</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Legal Statement</a></li>
</ul>
</section>
</nav>
<section id="section_article_main">
<pre id="pre_main">
<hgroup id="hgroup_main">
<h1>About domain.net</h1>
</hgroup>
<strong>• What is this site about ?</strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin enim, condimentum aliquet est vehicula ac.
Aliquam vitae imperdiet orci. Vivamus at nibh ut ipsum tempus vestibulum nec eget eros. Suspendisse vestibulum adipiscing ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus mi eros, mattis et pharetra vel, pharetra et nisl. Sed in elit vehicula sapien interdum hendrerit. Morbi lacus leo, ultricies eget ullamcorper in, bibendum et arcu. Nunc mollis condimentum ligula at facilisis.
Nulla dui ipsum, semper non ultricies non, sodales et turpis. Praesent pretium tincidunt ipsum non auctor. Fusce rutrum est sed purus iaculis vel fringilla ipsum blandit. Quisque risus metus, eleifend nec condimentum ut, egestas eget enim. Donec et purus et turpis varius vestibulum. Nunc nunc ipsum, laoreet ac feugiat vitae, facilisis eu metus. Cras tristique gravida fringilla.
Pellentesque mollis ante eget metus auctor adipiscing. Nam quis libero nec mauris vestibulum lacinia. Sed sit amet sapien in erat gravida mollis.
Morbi at metus orci, eu mattis enim. Phasellus nec arcu nisl. Sed consequat magna vel lacus facilisis facilisis at ac neque. Nullam pharetra consectetur sapien, placerat posuere ligula dapibus at. Integer et pellentesque arcu. Nulla eu ultrices sem. Donec id cursus libero. Phasellus eu mi quis nisi ultrices tempor et sollicitudin libero. Nam quam orci, rhoncus ut varius id, facilisis eget justo. Ut nec dui massa, in faucibus mauris. Cras non lacus sem, eu faucibus est. Proin aliquet, nibh vel aliquam mollis, ipsum lacus egestas erat, vehicula tempor augue nulla convallis odio. Nullam et enim ligula.
Phasellus fringilla condimentum orci, congue pretium nibh vulputate ac. In sed sollicitudin nisi. Cras id malesuada lorem. Suspendisse potenti. Pellentesque dictum accumsan lorem nec elementum. Aenean sit amet odio id nisi varius suscipit. Nunc consectetur convallis gravida. Ut facilisis gravida purus ac porta. Sed adipiscing urna vitae tellus aliquam vel tincidunt lectus lobortis.
Aenean a risus nec lectus pellentesque rutrum a nec erat. Donec feugiat nisl vitae nisi ultrices bibendum. Nullam diam arcu, vestibulum a gravida eu, lacinia sed diam. Donec odio velit, aliquet a elementum nec, pulvinar a nunc. Pellentesque lorem lectus, condimentum id auctor in, condimentum in arcu. Cras augue urna, pharetra nec pharetra sit amet, vehicula vitae lectus. Ut tristique nisi at eros suscipit molestie. Donec dolor eros, dignissim ut ultricies non, tempus sed nibh.
<figure>
<img src="" alt="" title="" />
<figcaption>
image description
</figcaption>
</figure>
<time datetime="2011-07-13T18:28:05Z"></time>
</pre>
</section>
</article>
<footer id="footer_main">
<aside id="aside_footer_main">
<a href="">About</a>
<a href="">Sitemap</a>
<a href="">Site bug ?</a>
<abbr title="All Rights Reserved.">©</abbr> domain 2011
</aside>
</footer>
</body>
</html>
Only fixed elements do not scroll with the page. All other elements will scroll with the page. If you add overflow scroll to a fixed height box then you can scroll within that box but the whole box will still scroll with the rest of the document.