三栏复合布局演示

#leftbox {
  position: absolute;
  left: 0px;
  width: 215px;
  }

该固定宽度的侧栏 #leftbox，是以绝对方式定位的，指定了它的left，而 top 没有指定。因而可以根据#header的高度自动确定它的位置。

此处的背景色来自于 <body> 标签，这样就可充满整个页面高度。

#header {
background-image:
  url("images/waterlilies6.jpg");
background-position: 0 0;
background-repeat: no-repeat;
height: 100px;
}

页面顶部的 #header div 充满了整个视区宽度，它有背景图片，也为其指定了高度，这样在页面装入时，就可以确定后面以绝对定位放置的div的位置。

多谢Jonas Erlandsson，是他当初的请求引发了这个演示的想法，还要感谢Philippe Wittenbergh在Mac下的测试和很好的建议，并多谢Big John的检查和支持，并鼓励我制作这个演示。

#rightbox {
  position: absolute;
  right: 0;
  margin-right: 0;
  width: 138px;
  }

这个绝对定位的 #rightbox 有宽度固定，设置了 right 位置。同样，这个div的 top 也没有指定，使得它可以根据前面的对象的高度自动调整位置。

这个div的背景色来自于#container内.gif图片，该图片在垂直方向上重复。.

由于本div和 #leftbox都是宽度固定的以绝对定位的div，所以内容过长不能换行时要特别小心，比如很长的 URL 或<pre>。 IE 会违反标准，将div撑开以包含内容。其他的浏览器会将过宽的内容显示在div之外。

IE4/Mac对该绝对定位的div则另有一套。详情和解决方法请看源文件。

在#leftbox之后是一个放置页面其余内容的#container div，这个div的左边距(left margin)等于前面的以绝对定位(AP)的div的宽度。此时，#container的左边框和右面重复的背景图片构成了#rightbox这拦的背景色。

#container {
  margin-left: 215px;
  background-image: url("rightbg.gif");
  background-position: 100% 0;
  background-repeat: repeat-y;
  }

在#container内，固定的div #navmenu包含有导航链接，我们在此使用了水平显示的无序列表。 Water Lily Flowers

#navmenu ul {
  display: block;
  list-style: none;
  text-align: center;
  }

#navmenu ul li {
  display: block;
  float: left;
  width: 10em;
  }

<ul>中的 <li>向左浮动并且宽度固定，而且<ul> 和 <li>的 display属性都是 {display: block}。之后是一个清除(浮动)的<span>。当浏览器窗口变窄或文字较长时，这个菜单会恰到好处地换行。

#wrapper {
  margin-right: 138px; 
  }

这个 #wrapper div 用来包含一些浮动对象。用于它在 #container 的内部，所以要为它指定右边距(right margin) 来清除绝对定位的#rightbox。

在IE5.5下必须为这个#wrapper指定宽度，来防止水平滚动条的出现，而IE6却又不能有宽度。其中的窍门请查看源文件。

.left {
  float: left;
  width: 43%;
  }
.right {
  float: right;
  width: 43%;
  }

在#wrapper中有两个浮动的容器，分别向左右浮动，没有特别之处。

由于这两个div都是浮动的，所以当一个div比另一个较长时，在IE中不会出现 3个像素的误差

IE 会双倍计算容器（此时为#wrapper）内紧靠浮动元素的边距(margins)，所以必须采用些技巧来纠正这个错误，具体请看源文件。

.clear {
  clear: both;
  margin: 0;
  padding: 0;
  }

浮动元素之后是一个清除浮动的div，样式为： {clear: both}.

IE5/Mac 必须将这个div的 margin 和 padding 设为0。因此，如果要在这个清除用div内放些文本或设置其边框，他就会充满#wrapper的整个宽度。在本演示中，只包含一个空格。

#contents {
  margin-right: 149px;
  margin-left: 10px;
  }

包含页面其余内容的另一个div，必须有右边距(right margin)，用来清除右侧绝对定位的div。如果希望将#container的背景色作为#contents的框架（正如此处这般），则它的左右边距(margin)还可以增加。

注意: 由于这个演示排版格式的需要(包含有<pre>标签)，所以如果浏览器窗口过小或者字体过大，本页面看起来可能很乱。如果您想调整浏览器大小或改变文字大小，请看这个演示页，其中没有使用<pre>标签，而且该页还有更多的布局技巧和已知的问题。

Perched Upon a Lily Pad