HTML5/CSSレイアウトの横に並べる

Question

このレイアウトの問題を解決するために昨夜（早朝まで）時間を費やします。私はcss3のヒントやトリックを読みましたが、私がこれを解決するのに役立つものは見つかりませんでした。 http://jsfiddle.net/aWsmb

ボトム、ライン：左にする必要がありますNAVがあり、そして右（クラシック）にする必要がありますサブコンテンツ

は私のフィドルを参照してください。何らかの理由で、SUBCONTENTは遊んでいいとは思っていません。それはNAVの後ろに「撃つ」か、そのすぐ隣に座っていますが、利用可能な幅のすべてを使用せず、フッターに重なります。フィドルを参照してください。

これは私が探しです：

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

次に、2つの追加の質問：

<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を使用してください。

そして、あなたが意味論的になりたいなら、サブナビのために脇に置いてください。私はそれについてあまり心配しないでしょう - セマンティックなレイアウトを持つことはいいですが、あなたができる最悪のことではありません：p

Answer 2

は亜大陸のDIVにfloat:rightを与え、あなたは適切な右マージンを与えることができます。 フッタが重複しないように、亜大陸のdivのmin-heightプロパティを削除することもできます。