只要将主内容的<div>浮动到左侧,并且为它设定小于100%的宽度,如此一来就能在右侧留下足够空间摆放侧边栏.

CSS内容

方法C需要的CSS内容再简单不过了,"一个float属性",内容区希望使用的宽度,以及两栏之间留下的小边界.

#header {
  padding: 20px;
  background: #ccc;
  }
#content {
  float: left;
  width: 66%;
  }
#sidebar {
  background: #999;
  }
#footer {
  clear: left;
  padding: 20px;
  background: #eee;
  }

请注意我们并不需要定义侧边栏的宽度,因为它会自动填满主内容<div>用剩下的空间(在这个例子中是34%).

悲惨的背景

图12-5就是以浏览器查看的成果,哦喔!在某些常用浏览器里,侧边栏的背景颜色会出现在主内容区底下,由于侧边栏并未制定宽度,因此它想扩到与浏览器视窗一样宽.

图12-5 浮动内容,但是侧边栏的背景颜色透了出来

这个部分只要我们能在侧边栏左边加上宽度与内容区相同的外边界便可以避开这个问题.实际上我们会把外补丁设的稍微大一点,以便在两栏之间留下一点空白.

#header {
  padding: 20px;
  background: #ccc;
  }
#content {
  float: left;
  width: 66%;
  }
#sidebar {
  margin-left: 70%;
  background: #999;
  }
#footer {
  clear: left;
  padding: 20px;
  background: #eee;
  }

简单朴素

或者是,如果涉及不需要用到背景色的话,那就不必设定边界了,图12-6是去掉整个#sidebar声明,在为主内容<div>加上一点右外补丁之后的结果.此时两栏会共用页面预设的背景色.

图12-6 不使用背景色的浮动内容

CSS则能缩减成:

#header {
  padding: 20px;
  background: #ccc;
  }
#content {
  float: left;
  width: 66%;
  margin-right: 6%;
  }
#footer {
  clear: left;
  padding: 20px;
  background: #eee;
  }

除了加上左外补丁(或是省去背景色)之外,还有个使用背景图片的替代做法能让分栏具备背景色彩,我稍后会在本章的" 技巧延伸 "单元里提示这个小秘密.

方法D:定位

<div id="header">
  ...页首内容...
</div>
<div id="content">
  ...主内容...
</div>
<div id="sidebar">
  ...侧边栏...
</div>
<div id="footer">
  ...页脚内容...
</div>

方法D是使用相同的标记源代码结构,然后以最有效率的方式排列<div>:把主内容放在侧边栏之前,关闭样式的浏览器,屏幕阅读器会先收到主内容部分,再收到侧边栏,在定位时,标记源代码内的顺序与页面元素出现的位置没有关系.

能够预测的高度

CSS内容与前三个方法有点类似,第一个差异是对页首指定的像素高度,我们需要能够预测的高度以便稍后为侧边栏定位.

在这里随机选了一个数字,而这需要根据页首使用的内容调整,像是标志,导航栏,搜索表单等.

#header {
  height: 40px;
  background: #ccc;
  }
#footer {
  padding: 20px;
  background: #eee;
  }

为各栏留下空间

接着,要为#content这个<div>设定右外补丁,就像前几个方法一样,这能为右侧边栏留下空间,稍后会使用绝对定位法(不是浮动)把右侧边栏放进去.

#header {
  height: 40px;
  background: #ccc;
  }
#content {
  margin-right: 34%;
  }
#footer {
  padding: 20px;
  background: #eee;
  }