Tutorial 21: CSS Floats, Part II

Multiple Columns and Floats

In Tutorial 20, I set an exercise for all of you, to find a way to get multiple-column layouts like those we learned about in Tutorial 19. The trick is to remember that floats, at least according to the CSS specification, do not displace block boxes, only inline content. As we mentioned last time, the rest of the block boxes in the document are layed out as if the float didn't exist at all. So, if we create some space where the float is supposed to float to, it should be floating over a blank part of the page. Confused? Let me explain.

Remember this HTML document? Last time we saw it, we used CSS positioning to put the DIV element with an ID of intro on the left and the DIV element with an ID of main on the right, creating two 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">
 </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>

Tutorial 21: CSS Floats, Part II

Multiple Columns and Floats

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos