Tutorial 19: CSS Positioning, Part II - HTML with Style | 3 | WebReference

Tutorial 19: CSS Positioning, Part II - HTML with Style | 3

index123456

Tutorial 19: CSS Positioning, Part II

A Simple Two-Column Layout

Often when creating layouts for HTML documents, you'll want columns of text to appear side-by-side. Most people these days use an HTML table to achieve this effect, using only one row with two cells, each containing the contents of a column. This technique works for most popular browsers, but it has the unfortunate problem that it is completely wrong. I'll refrain from launching into another rant and refer you to Tutorial 11 for my justifications.

There are actually several ways to achieve columnar layouts with CSS, and some are better than others. Unfortunately, as I said above, all but the one I'm about to teach you suffer from the slight defect that if they're viewed with Internet Explorer and Navigator, your documents will look like a Picasso viewed through a kaleidoscope. On acid. Bad acid, too.

So, let's see what we want to achieve. The simplest case is that we have a document with two sections, and we want these two sections to appear side-by-side. We start off by enclosing each section in a DIV element, and giving each DIV a unique ID attribute. We also enclose both sections in a DIV element, and give it its own ID. So, our document will look something like the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "https://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="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>

The reason we've wrapped a DIV element around each section is so that we can position them as elements. We want to place the element with ID intro on the left half of the page and the element with ID main on the right half of the page. Now we'll use a neat trick using the techniques we've learned: We'll give main a large left padding to create space, and use positioning to place intro in that space. We can do this using the following style sheet:

Note that normally, we'd create space for the left column using the right column's margin, not its padding. Unfortunately, this triggers a bug in Internet Explorer 5.5. Specifically, the margin of the right column is not figured in the width of the containing element, which is "shrunk" to fit the right column's inner width, hence the left column is positioned on top of the right column; if you didn't get that, don't worry, just don't use a margin.

#body {
 position: relative;
}
#main {
 padding-left: 11.5em;
}
#intro {
 position: absolute;
 top: 0;
 left: 0;
 width: 10em;
 border: medium solid #ACA250;
}

Note that I've given both the padding-left property for the section on the right and the width property for the section on the left an absolute value. Ideally, in most cases, you'd like to use a percentage width instead, so that the layout scales depending on the width of the user's viewport. Unfortunately, you can't do that, since this percentage is interpreted incorrectly by Navigator. This will create a few problems, which we will examine later on.

Let's see what our example looks like.

We've put the two sections side by side, but what now? What if we want some text above or below these columns?

index123456

https://www.internet.com/

Legal Notices.

URL: https://www.webreference.com/html/tutorial19/2.html

Produced by Stephanos Piperoglou
Created: March 08, 2000
Revised: August 15, 2000