图12-3是加上这段CSS之后的显示效果,能看到侧边栏跑到右边去了,而主要内容在侧边栏范围之内流动.

图12-3 把#sidebar浮动到主要内容的右侧

真正的栏位

看看图12-3,我们还没有真正完成两栏布局,为了完成这个效果还必须取#content这个<div>,指定与忧侧边栏宽度相同的右外补丁,因此产生放置#sidebar的空间.

需要加上的CSS就是这么简单:

#header {
  padding: 20px;
  background: #ccc;
  }
#sidebar {
  float: right;
  width: 30%;
  background: #999;
  }
#content {
  margin-right: 34%;
  }
#footer {
  clear: right;
  padding: 20px;
  background: #eee;
  }

我们会发现,我们给content设定的右外补丁大小比#sidebar还大4%,如此能在两栏之间留下一点空位.图12-4是以浏览器查看的效果,你可以发现只要为<div>设定右外补丁,就能造出第二栏的假象.

图12-4 两栏布局

同时要留意的是对#footer所加上的clear:right规则,这个规则很重要,能确保页尾一定会出现在侧边栏和内容区之后,而不受两栏的长度变动影响,页尾会避开任何先前出现的float内容.

现在有了能使用的两栏布局,可以继续为现在的CSS声明加上更多边界,背景,边框与其他元素,使外观更吸引人.

至今为止我们都以百分比设定宽度,以便造出灵活的布局(栏宽会自动随着使用者的视窗宽度缩放).我们也能以像素单位造出定宽布局,但是以像素指定内外补丁大小时,必须注意IE for Windows错误解析CSS盒模型的问题,你能在本章的"盒模型问题"找到更多信息以及能用的解决方法.

方法B:双重浮动

<div id="header">
  ...header content here...
</div>
<div id="content">
  ...main content here...
</div>
<div id="sidebar">
  ...sidebar content here...
</div>
<div id="footer">
  ...footer content here...
</div>

方法A的缺点之一是:为了浮动侧边栏,则必须在标记源代码之内把侧边栏放到主内容<div>的前面,关闭CSS的浏览器,文字浏览器,屏幕阅读器与其他不支持CSS的设备将会在页面主要内容之前显示(或念出)侧边栏的内容.这样实在不严谨.

我们可以利用float做法,并避开这个问题,只要交换标记源代码里的主内容,侧边栏<div>的位置(如上所示),然后以CSS将两者浮动到不同边即可.

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

通过把两个<div>浮动到不同方向,就能以最恰当的方式排列源代码(主内容放在侧边栏前面),同时仍能得到图12-4这样的效果.

避开两边

同样重要的是,你必须将#footerdeclear属性设为both,如此一来不管两栏的长度多长,页尾总是显示在最后,而标签源代码的内容顺序也改善了.

方法C:浮动主内容

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