EDIT: I did not found the ideal solution: it breaks when the middle column isn't wide enough.

I finally found the solution (below), inspired from http://www.positioniseverything.net/articles/onetruelayout/a...

This layout is source ordered (header article nav aside footer), liquid, and the side columns have a fixed width. You can easily do the same thing with 2 columns only. The only drawback left is the fact that I can't force the columns to share the same height. As far as compatibility is concerned, I think an html 4.1 version will work on any relevant browser. So I think I found my ultimate layout. At last.

  <!doctytpe html>
  <html>
    <head><link rel="stylesheet" href="test.css" /></head>
    <body>
      <header> header header header header header </header>
      <article>
	article article article article article
        article article article article article
        article article article article article
      </article>
      <nav>    nav nav nav nav nav nav            </nav>
      <aside>  aside aside aside aside aside      </aside>
      <footer> footer footer footer footer footer </footer>
    </body>
  </html>

  /* html5 reset */
  article, nav, aside, header, footer { display:block; padding:1em; }
  /* colors */
  html           { background-color:#fff; }
  body           { background-color:#ddd; }
  header, footer { background-color:#aaa; }
  nav, aside     { background-color:#8aa; }
  article        { background-color:#a8a; }
  /* layout */
  body    { margin:auto; padding:2em; width:35%; }
  article { float:left; margin-left:5em; margin-right:5em; }
  nav     { float:left; width: 3em; margin-left:-100%; }
  aside   { float:left; width: 3em; margin-left:-5em;}
  footer  { clear:both; }