CSS scrollable zone (part 1: construction)

Cadres (frames and iframes) are used a lot for setting up layout with static parts and dynamic parts (scrollable). However, this technique which is not very much used in professional websites has many disavantages, especially concerning referencing, user's favorite selection and page printing (more details on OpenWeb)

We will use a different technique without using frames but a very useful div property, the overflow: auto. (view result here)

As you can see on the result page, only the central part of the content is fluid and scrolls vertically. The rest of the website stays static.

Practically, this page is separated into four parts:

Here is the CSS part (Note: /* these texts are explanations and can be suppressed*/) :

<style type="text/css">
<!--
body {
margin: 0;
padding:0;
position: absolute;
width: 100%;
height: 100%;
font-family: verdana, arial, sans-serif;
}
.haut {
width: auto;
height: 126px;
background-color: #06C;
color: #fff;
font-size: 36px;
padding: 10px;
}
.conteneur {
height: 338px;
width: 100%;
}
.gauche {
position: absolute;
left: 0;
width: 180px;
height: 338px;
background-image: url(gauche.gif);
}
.frame {
margin-left: 180px; /* place this block to the right of the menu block that is 180 pixels wide */
width: auto;
height: 338px;
overflow: auto; /* This property will allow the block to be scrollable */
font-size: 14px;
}
.bas {
width: auto;
height: 30px;
background-color: #06C;
color: #fff;
font-size: 12px;
padding: 10px;
}
-->
</style>

As a conclusion, our HTML code will only place the block one after the other: 

<body>
<div class="haut">mon site .com</div>
<div class="gauche"></div>
<div class="frame">
  <h1>une présentation sans Frames !</h1>
  <p>test</p>
  <p>test</p>
...
</div>
<div class="bas">This bottom part stays static </div>
</body>

It is also possible to make this block dynamic, that is to change its content to simulate frames: the website will stay static but the central part will change according to the choices int he menu.

See the second part of this tutorial: Simulate frames with CSS (Minimal knowledge of PHP a required)

Print article

Raphaël GOETTER
www.alsacreations.com