CSS-2 question

[Andrew Mutch]

I've been playing around with using CSS-2 to handle the positioning of content in
place of using tables in HTML.  With a little experminentation, I've generally
been able to get most of the elements to layout the way that I want them to.
However, one problem is perplexing me and I'm not sure how to get this to work.
The concept that I'm trying to create is the effect of a navigational table
right-aligned in a contrasted color bar.  In "old-school" HTML, I would have done
it this way:

<table>
<tr>
<td bgcolor="#0099FF">Some Content</td>
<td>
<!--Nav Table-->
<table>
<tr>
<td>Nav Element 1</td>
<td>Nav Element 2</td>
<td>Nav Element 3</td>
</tr>
</table>

IN CSS, I tried this:

<div id="menu">

<!--Nav Table-->
<div id="navigate">
Nav Element 1 |
Nav Element 2 |
Nav Element 3 |
</div>

</div>

with the IDs defined in a separate CSS file as:

#menu {
background-color: #09F;
padding: 0 0 0 5;
border-bottom: 1px solid blue;
}

#navigate
{
float: right;
color: #3CF;
margin: 0;
padding: 4px;
}

Unfortunately, while the "nav table" is floated right, it always appears below the
"menu" box.  It doesn't seem to recognize that the "navigate" elements are within
the "menu" box.  Instead, it places them outside the box. The only way I can get
it to work is to place content within the "menu" box or give the "menu" box a
height property.  But, that's not a solution.  Any suggestions?

Andrew Mutch
Library Systems Technician
Waterford Township Public Library
Waterford, MI