Tutorial 24: Fixing Frames with Fixed Positioning

Our first example

The easiest way to create a framed page using CSS fixed positioning is to take a document, split it up into sections using the DIV element, and use fixed positioning to place these sections in different parts of the viewport. To illustrate this example, we'll take the page from Acme Computer Corporation's Web site that we toyed with in Tutorial 19. The placement of the DIV elements is slightly different this time around, however.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
  <TITLE>Acme Computer Corporation Home</TITLE>
  <LINK REL="stylesheet" HREF="acme.css">
  <LINK REL="stylesheet" HREF="layout.css">
 </HEAD>
 <BODY>

  <DIV ID="navigation">
<P><A HREF="about/">About Acme</A> &#8212;
<A HREF="products/">Products</A> &#8212;
<A HREF="support/">Support</A> &#8212;
<A HREF="tips/">Tips</A> &#8212;
<A HREF="feedback/">Feedback</A></P>
  </DIV>

  <DIV ID="intro">
<H1>Welcome to Acme</H1>

<P>Acme Computer Corporation is a world leader in object
transfirbulation technology. We offer a variety of server,
client and developer software that will cover all of your
transfirbulation needs.  Our team of experts will help you
integrate transfirbulation technology into your existing IT
infrastructure, whatever the size of your organization or
the platform you are using.</P>

  </DIV>
  <DIV ID="news">
<H1>Acme News</H1>

<H2>MORONS Server 4.1.2 SP3 Build 4356 Released!</H2>

<P>The newest MORONS server brings increased reliability,
performance and a wealth of new features. With Version 4.1.2
Service Pack 3 Build 4356 you can improve your transpose
transfirbulation factor by up to 35% with proxy
garfing. Deploying MORONS Server couldn't be easier than the
new FancyConfigurator made especially for MORONS. And of
course, all the familiar features of MORONS Server 4.1.2 SP3
Build 4355 are still available!</P>

<H2>Transfirbulation Tips Featured Article: Proxy Garfing
for MORONS.</H2>

<P>Iain T. Kidinn, head of the Proxy Garfing team that
created the new Proxy Garfing features in MORONS. Server
4.1.2 SP3 Build 4356, explains how you can use proxy garfing
to raise transpose transfirbulation factors in this article
in <I>Transfirbulation Tips</I>, our online magazine for
MORONS users. Optimizing for partially transfirbulated data
is the key, Iain points out.</P>

<H2>MORONS in the News: MORONS Suite 2000 passes
Transfirbulation Week's lab tests with flying colors</H2>

<P>The January issue Transfirbulation Week magazine, a
leading publication on object transfirbulation technology,
has put all of the components of MORONS Suite 2000 through
their exhaustive set of lab tests, concluding that
<I>"[MORONS Suite 2000] receives an overall score of 98%,
the highest ever rating for any originating name sequencer
we have tested."</I></P>

  </DIV>
  <DIV ID="copyright">
<P>&copy; 2000 Acme Computer Corporation. All Rights
Reserved.</P>
  </DIV>
 </BODY>
</HTML>

The next step is to begin positioning the sections we have named navigation, intro, main and copyright. The first step is to set the position property on all four to fixed. Now it's time to set their positions and size.

Tutorial 24: Fixing Frames with Fixed Positioning

Our first example

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos