Tutorial 19: CSS Positioning, Part II


Search The Business Internet

Placing elements above columns

Putting elements above our two columns is easy. You'll have noticed that we used a DIV element to enclose both sections, and set its position property to relative. This means that the left column is not positioned relative to the viewport, but relative to this DIV element. Remember, as we saw in the previous tutorial, absolutely positioned elements are placed relative to their closest positioned ancestor element; in this case, the DIV with an ID of body. Placing elements before this element in the document will simply push it down, since relatively positioned elements behave like normal elements, but appear displaced by a certain value. In this case, the value is zero, so the element is not displaced from its normal position. Here is an example, adding a paragraph with navigation links above our columns:

<!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="header">
<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="body">
   <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="main">

<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>
 </BODY>
</HTML>

As you can see in this example, the columns are shifted down to make room for the paragraph above them. When you want things to follow this layout, however, you might have a problem.