Once more the joy of trying to use pure CSS for layout has me stumped. Please consider, if you will, the following code:

HTML Code:
<div class="layout"
     style="background: orange; width: 400px; text-align: center;
            margin-left: auto; margin-right: auto;
            padding-top: 20px; padding-bottom: 20px;">
  <div class="topbar" style="background: blue;">Topbar goes here</div>
  <div class="menuandcontent" style="background: green;">
    <div class="menu" style="background: yellow;">
      <a class="menu" href="home.html">Home</a><br />
      <a class="menu" href="about.html">About Us</a><br />
      Etc...
    </div>  <!-- /menu -->
    <div class="content">
      <h1>Bork, bork, bork!</h1>
      <p>(Insert chocolate moose recipe here)</p>
    </div> <!-- /content -->
    <div class="footer">(c) 2010 etc.</div>
  </div> <!-- /menuandcontent -->
</div> <!-- /layout -->
It's simple stuff: a centered frame, in which you find a top bar, a left hand side menu, and a content frame. All have different background colors, to show off the different elements. (What I'm trying to do in the real world is using this approach with proper styling including margins, alignment and background images, of course - this is just some code to demonstrate what I'm stuck with.)

What I want is to make the menu <div> float left. So I add a 'float:left' to the <div> of class menu (where the comment below says "HERE"):

HTML Code:
<div class="layout"
     style="background: orange; width: 400px; text-align: center;
            margin-left: auto; margin-right: auto;
            padding-top: 20px; padding-bottom: 20px;">
  <div class="topbar" style="background: blue;">Topbar goes here</div>
  <div class="menuandcontent" style="background: green;">
    <div class="menu" style="background: yellow; float: left">  <!-- HERE -->
      <a class="menu" href="home.html">Home</a><br />
      <a class="menu" href="about.html">About Us</a><br />
      Etc...
    </div>  <!-- /menu -->
    <div class="content">
      <h1>Bork, bork, bork!</h1>
      <p>(Insert chocolate moose recipe here)</p>
    </div> <!-- /content -->
    <div class="footer">(c) 2010 etc.</div>
  </div> <!-- /menuandcontent -->
</div> <!-- /layout -->
That works - the menu floats left, but now I see a gap between my top bar and my menu/content sections. And try as I might, I cannot figure out what's causing it - much less get rid of it. WTF?????

Can anyone enlighten me? Even just a little? What's happening here?

// Frank