Tutorial 19: CSS Positioning, Part II

Placing elements below columns

As I explained in Tutorial 18, absolutely positioned elements are completely removed from the document flow. So, placing elements after the two columns will cause the browser to display them below the element before them in the document, which is the DIV with an ID of body. This element's height is governed by its contents which in this case is only the right columns, because the left column is absolutely positioned and does not affect the layout of the rest of the document. The consequence of all of this is that any elements placed after our columns will be displayed below the right column. This is not a problem most of the time in our example, but it might be a problem if the left column is taller than the right column; in such a case, the left column would overlap the elements below it.

The only solution to this problem, unfortunately, is to make sure that the contents of the absolutely positioned column (which could be the left or right column; our example positioned the left column in the right column's padding, but you could do it the other way around) should take up significantly less space than that of the fixed-positioning column. The reason they have to be significantly shorter is that their width is fixed (in this case, to 10ems) while the right column takes up all the available space left. If the viewport of the browser is wide enough, this might mean considerably more than 10ems.

Here is our example, with a copyright example placed below the two columns. You can view the example here.

<!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>
  <DIV ID="footer">
<P>&copy; 2000 Acme Computer Corporation. 
All Rights Reserved.</P>
  </DIV>
 </BODY>
</HTML>