[WEB4LIB] CSS-2 question

[Andrew Mutch]

OK, I'm sure actually viewing the page will make these points clear.  So, drive your
CSS-compliant browsers here:

http://tln.lib.mi.us/~amutch/concept.htm

Thanks!

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

Andrew Mutch wrote:

> 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