38、网页布局：侧边栏与内容区的浮动布局优化

网页布局：侧边栏与内容区的浮动布局优化

1. 移动侧边栏

当浮动一个元素时，需要将该元素的 HTML 代码移到想要它跟随的元素正下方。对于侧边栏，要将其移到头部下方。具体操作步骤如下：
1. 在编辑器中找到“chapter11/starbuzz”文件夹下的“index.html”文件。
2. 定位到侧边栏的 <div> 标签。
3. 将整个 <div> 标签移到头部 <div> 标签的正下方。
4. 保存文件后重新加载页面。

侧边栏的 CSS 样式如下：

#sidebar {
    background: #efe5d0 url(images/background.gif) bottom right;
    font-size:  105%;
    padding:    15px;
    margin:     0px 10px 10px 10px;
    width:      280px;
    float:      right;
}

此时，侧边栏应位于主内容区域的上方。

2. 设置侧边栏宽度并浮动

接下来，需要设置侧边栏的宽度为 280 像素，并使其浮动。具体步骤如下：
1. 在“chapter11/starbuzz.css”文件中添加以下代码：

#sidebar {