不修改HTML仅通过CSS解决float失效：实现aside置于article左侧

现有代码无法实现侧边栏并排，是三处CSS配置错位导致的：

• 作为并排元素的article和aside没有设置明确宽度，块级元素默认占满容器100%宽度，即使设置了浮动也会因总宽度超出容器自动换行堆叠
• article内部的section错误设置了右浮动，会干扰主内容容器的位置计算
• 全局页脚错误设置了右浮动，会脱离文档流飘到侧边位置，无法落在内容最底部

不需要修改任何HTML代码，逐行调整现有CSS规则即可：

1. 移除section上多余的右浮动，保留overflow:auto用来撑开容器高度、清除内部浮动：
   原代码：

   section {background-color: cornsilk;overflow:auto;float: right;}
   

   修改为：

   section {
     background-color: cornsilk;
     overflow: auto;
   }
   

2. 给article设置明确宽度，作为右侧主内容区定位：
   原代码：

   article {color: black;float: right;}
   

   修改为：

   article {
     color: black;
     float: right;
     width: 720px; /* 适配960px总宽的wrapper容器 */
   }
   

3. 给aside设置明确宽度，作为左侧侧边栏定位：
   原代码：

   aside { 
     float: left;
   }
   

   修改为：

   aside {
     float: left;
     width: 200px; /* 与article总宽度920px，剩余40px作为内容间距 */
   }
   

4. 修正全局页脚的浮动设置，让页脚稳稳落在内容最底部：
   原代码：

   footer {
     background-color: #666;
     text-align: center;
     font-size: 35px;
     color: white;
     font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
     float: right;
   }
   

   修改为：

   footer {
     background-color: #666;
     text-align: center;
     font-size: 35px;
     color: white;
     font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
     clear: both; /* 消除左右浮动的影响，让页脚出现在所有浮动元素的下方 */
   }
   

960px宽度的#wrapper容器内，元素从上到下排布为：

• 顶部通栏header
• 同一水平行内：右侧720px宽度的article主内容区、左侧200px宽度的aside侧边栏，形成左栏+右主区的侧边栏结构
• 最底部通栏页脚

内容的提问来源于stack exchange，提问作者Chris