How to Mark-up a 3 pane page in HTML 5

Question

Wanted some advise on how to mark-up in HTML-5 a 3 pane-page that would be something like this:

________________________________________ | Nav Pane | Content Pane | Info Pane | ________________________________________

So I figure this would be my basic layout:

<aside id="nav">
   <nav></nav>
</aside>
<section id="content"></section>
<aside id="info"></aside>    

But if I want to then display them the section side by side I would need to create a wrapper to hold the 3 elements , but I'm not sure what would be a valid HTML-5 element to use, the obvious is just to create a div to hold them:

<div>
   <aside id="nav">
      <nav></nav>
   </aside>
   <section id="content"></section>
   <aside id="info"></aside>    
</div>

but that feels like a cheat.

Any suggestions?

Answer 1

You can use header wrapper for nav & section for rest of the two.

<header>
    <nav class="nav">
    </nav>
</header>
<section class="content"></section>
<section class="info"></section>

There is specific purpose of using aside . You can use aside wrapper for info if it is related to content or something other.