HTML5 / CSS布局并排显示

Question

昨晚（直到清晨）花了几个小时来修复这个布局问题。我阅读了大量的css3提示和技巧，但我无法找到帮助我解决这个问题的方法。

看我的小提琴： http://jsfiddle.net/aWsmb

Bottom，line：有一个NAV需要在左边，一个SUBCONTENT需要在右边（经典）。出于某种原因，SUBCONTENT不想玩，也不好。它要么在NAV后面“射击”，要么就在它旁边，但它不会使用所有可用的宽度并与页脚重叠。见小提琴。

这就是我要寻找的：

---------------------------------
| header                        |
---------------------------------
| main nav                      |
---------------------------------
| main section                  |
---------------------------------
| NAV | SUBCONTENT (full-widh)  |
|     |                         |
---------------------------------
| footer                        |
---------------------------------

然后还有两个问题：

<div id='subnav'> = better to ASIDE for this?
<div id='association'> = better to use ARTICLE here?

Answer 1

不是将association div浮动，而是可以取下浮动并给它一个margin-left侧导航的大小+你想要的任何填充。 EG：http://jsfiddle.net/aWsmb/15/。这样它也会填写它的父容器。否则，如果您使用浮动，请在父级上使用overflow: auto以确保子级填充它。

是的，如果你想要语义，请使用旁边的subnav。我不会过分担心它 - 拥有语义布局很不错，但这不是你能做的最糟糕的事情：p

Answer 2

将float:right提供给次大陆div，您可以给予适当的右边距。 您也可以删除次大陆div的min-height属性以避免页脚重叠。