Figuring out heights in CSS
===

This has been bugging me for a while.
I am trying to "get" CSS -- not because I need to, but out of sheet principle.
Now...

I have a css like this:


    #sidebar {
     float: left;
     margin: 0;
     padding: 0;
     background: #044169;
    }

    #sidebar-menu {
     height: 100%;
     margin: 0;
     padding: 0;
     background: #CCCCCC;
    }


(Call it test.css) and a simple HTML file like this:


    <!DOCTYPE html>
    <html>
    <head>

      <link rel="stylesheet" href="test.css">
    </head>

    <body>
      <h1> Test </h1>

      <div id="sidebar">
        <div id="sidebar-menu">
          <ul>
            <li>One</li>
          </ul>
        </div>
      </div>
    </body>

I _really_ do not understand why sidebar-menu is 35px high, and sidebar is 51px wide. Shouldn't sidebar-menu be as high as sidebar...?!?

In my head, I think: well, margins are 0, paddings are 0, so the containing element, sidebar-menu, which has height:100% (of the container, I would think), ought to be as big as the container!

I am obviously getting something very wrong...

Thank you in advance!

Merc.