HTML - Ayuda con float

<header>

  <h3>www.Blob.cl</h3>

     <nav>

       <ul>

  <a href="/html/">HTML</a> |

  <a href="/css/">CSS</a> |

  <a href="/js/">JavaScript</a> |

  <a href="/jquery/">jQuery</a>

       </ul>

</nav>

  </header>

<main>

  <div>A : Sidebar</div>

  <div>B : Contenido

  <h1>Navegadores web</h1>

    <p>Los mas populares.</p>

   <article>

  <h2>Mozilla Firefox</h2>

  <p>Mozilla is a free, open-source web browser developed by Mozilla Corporation, released in 2003.</p>

</article>

     <article>

  <h2>Google Chrome</h2>

  <p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>

</article>

  </div>

  <div>C : Links</div>

</main>

<footer>pie</footer>

body,html{

height:100%;

  width:100%;

  padding:0;

  margin:0;

}

header, footer, nav, main {

  display:inline-block;

  width:100%;

}

header{

  background-color:#7D6EFF;

}

nav {

  background-color:#5DA9FF;

}

nav ul {

  text-align:center;

}

main{

  background-color:#FDFF91;

  height:auto;

}

main > div {

  width:33%; float:left;

}

footer{

  background-color:#FFDD5F;

}