Fixed Layout example

by alexbfree

HTML

<body>
  <div id="top_container">
    <div id="nav">[Navigation]</div>
    <div id="top">[Top space]</div>
    <div id="contents">[Contents]
  <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue metus a nisl vestibulum malesuada. Maecenas eu hendrerit odio. Proin molestie tellus tellus, eget volutpat magna. Nulla nec nibh eget libero fringilla mattis. Phasellus diam massa, laoreet vitae tempus in, elementum non lectus. Suspendisse volutpat elementum magna a tristique. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer vitae nibh a nisi tempus euismod. Quisque ligula diam, aliquam ac scelerisque pretium, tempus non mauris. Nullam sit amet neque lacus, ut vulputate ligula. Suspendisse in felis mi, quis placerat urna. Fusce tristique porttitor est ut tincidunt. Ut luctus sem ut est venenatis porttitor. Curabitur nibh tellus, pharetra eget lobortis non, sodales a nisl. Pellentesque vel nunc mauris.
  </p>
  <p>

  </p>
  <p>
   Fusce lacinia auctor leo, eget tempor lacus tristique vitae. In in urna id velit rutrum rutrum ut sed urna. Nulla hendrerit massa sed enim viverra tristique. Vestibulum in tellus tortor, at congue leo. Vivamus nec dui lorem, a gravida sem. Curabitur bibendum diam id massa mollis ultrices rutrum eros varius. Donec interdum, justo sed laoreet vulputate, dolor massa hendrerit elit, et sodales sapien turpis malesuada est. In sed neque aliquam erat tempus blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi quis est ut nisi facilisis fringilla luctus tempor nibh. Morbi aliquet erat a est tincidunt vitae imperdiet dui dapibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean ipsum diam, scelerisque quis commodo in, rutrum ut odio. Vestibulum vel elit a nibh porttitor aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc...

CSS

html, body
{
    margin: 0;
    padding: 0;
}

body
{
    line-height: 160%;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    overflow-x: hidden; /*<---*/
    overflow-y: scroll; /*<---*/
}

#top_container
{
    width: 850px;
    height: 100%;
    margin: 0 auto; /*inhoud wordt gecentreerd*/
    min-height: 100%;
}

#top
{
    left: 0px;
    top: 0px;
    width: 100%;
    height: 80px;
    text-align: center;
    position: fixed;
    z-index: 10;
    background-color: rgb(255, 255, 255); /*zodat content inhoud er bij scrollen niet doorheen 'bloedt'*/
}

#bottom
{
    width: 400px;
    height: 4em;
    text-align: center;
    bottom: 0px;
    color: #999;
    margin-left: 145px;
    position: fixed; /* <-- */
    z-index: 10;
    background-color: #fff; /*zodat content inhoud er bij scrollen niet doorheen 'bloedt'*/
}
#bottom a
{
    color: #999;
}
#bottom p
{
    line-height: 4em; /* zet de tekst strak onderaan */
}

#contents
{
    left: 145px;
    top: 100px;
    width: 400px;
    height: 100%;
    color: #313a71;
    line-height: 1.5em;
    overflow: hidden;
    padding-top: 5px;
    padding-bottom: 5em;
    position: relative; /* <-- */
}

#contents p
{
    margin-top: 0px;
}

#nav
{
    top: 100px;
    width: 125px;
    bottom: 2em;
    color: #313a71;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    position: fixed; /* <-- */
    border: 1px dotted #999;
}